@charset "UTF-8";
.container {
    width: calc(100% - 2 * var(--component-padding));
    margin-left: auto;
    margin-right: auto
}

.flex, .grid {
    --gap: 0px;
    --gap-x: var(--gap);
    --gap-y: var(--gap);
    gap: var(--gap-y) var(--gap-x)
}

.flex > *, .grid > * {
    --sub-gap: 0px;
    --sub-gap-x: var(--sub-gap);
    --sub-gap-y: var(--sub-gap)
}

.grid {
    --grid-columns: 12;
    display: flex;
    flex-wrap: wrap
}

.grid > * {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports not (translate:none) {
        .flex[class*=gap-], .grid {
            gap: 0;
            margin-bottom: calc(-1 * var(--gap-y));
            margin-left: calc(-1 * var(--gap-x))
        }

        .flex[class*=gap-] > *, .grid > * {
            margin-bottom: var(--gap-y)
        }

        .grid {
            --offset: var(--gap-x);
            --gap-modifier: 0;
            --offset-modifier: 1
        }

        .grid > * {
            margin-left: var(--offset)
        }

        .flex[class*=gap-] > * {
            margin-left: var(--gap-x)
        }
    }
}

.gap-xxxs {
    --gap-x: var(--space-xxxs);
    --gap-y: var(--space-xxxs)
}

.gap-xxxs > * {
    --sub-gap-x: var(--space-xxxs);
    --sub-gap-y: var(--space-xxxs)
}

.gap-xxs {
    --gap-x: var(--space-xxs);
    --gap-y: var(--space-xxs)
}

.gap-xxs > * {
    --sub-gap-x: var(--space-xxs);
    --sub-gap-y: var(--space-xxs)
}

.gap-sm {
    --gap-x: var(--space-sm);
    --gap-y: var(--space-sm)
}

.gap-sm > * {
    --sub-gap-x: var(--space-sm);
    --sub-gap-y: var(--space-sm)
}

.gap-md {
    --gap-x: var(--space-md);
    --gap-y: var(--space-md)
}

.gap-md > * {
    --sub-gap-x: var(--space-md);
    --sub-gap-y: var(--space-md)
}

.gap-0 {
    --gap-x: 0;
    --gap-y: 0
}

.gap-0 > * {
    --sub-gap-x: 0;
    --sub-gap-y: 0
}

.col-1 {
    --span: 1
}

.grid-col-2 {
    --grid-columns: 2
}

.col-4 {
    --span: 4
}

.col-6 {
    --span: 6
}

.col-12 {
    --span: 12
}

.col-1, .col-12, .col-4, .col-6 {
    flex-basis: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
    max-width: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x))
}

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

@media (min-width: 32rem) {
    .grid-col-3\@xs {
        --grid-columns: 3
    }

    .col-3\@xs {
        --span: 3
    }

    .col-4\@xs {
        --span: 4
    }

    .col-3\@xs, .col-4\@xs {
        flex-basis: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        max-width: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x))
    }
}

@media (min-width: 48rem) {
    .col-2\@sm {
        --span: 2
    }

    .col-2\@sm {
        flex-basis: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        max-width: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x))
    }
}

@media (min-width: 64rem) {
    .grid-col-2\@md {
        --grid-columns: 2
    }

    .col-3\@md {
        --span: 3
    }

    .grid-col-4\@md {
        --grid-columns: 4
    }

    .col-6\@md {
        --span: 6
    }

    .col-3\@md, .col-6\@md {
        flex-basis: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        max-width: calc(((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x))
    }
}

@media (min-width: 80rem) {
    .grid-col-5\@lg {
        --grid-columns: 5
    }
}

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

* {
    font: inherit
}

a, article, audio, b, body, canvas, center, code, div, embed, figcaption, figure, footer, form, h1, h2, h3, h4, h5, header, html, i, iframe, img, label, li, menu, nav, object, ol, p, s, section, span, strong, summary, time, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0
}

html {
    box-sizing: border-box
}

body {
    background-color: var(--color-bg, #fff)
}

article, figcaption, figure, footer, header, main, menu, nav, section {
    display: block
}

ol, ul {
    list-style: none
}

button, input, select, textarea {
    margin: 0
}

.btn, .form-control, .link, .reset {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

select.form-control::-ms-expand {
    display: none
}

textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top
}

input::-ms-clear {
    display: none
}

img, svg, video {
    max-width: 100%
}

:root {
    --space-unit: 1rem
}

*, :root {
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
    --component-padding: var(--space-md)
}

:root {
    --radius-sm: calc(var(--radius, 0.25em) / 2);
    --radius-md: var(--radius, 0.25em);
    --radius-lg: calc(var(--radius, 0.25em) * 2);
    --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 0 46px 60px -6px rgba(0, 0, 0, 0.2);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1)
}

:root {
    --heading-line-height: 1.2;
    --body-line-height: 1.4
}

body {
    font-size: var(--text-base-size, 1rem);
    font-family: var(--font-primary, sans-serif);
    color: var(--color-contrast-high, #323639);
    font-weight: var(--body-font-weight, normal)
}

h1, h2, h3, h4 {
    color: var(--color-contrast-higher, #0d1317);
    line-height: var(--heading-line-height, 1.2);
    font-weight: var(--heading-font-weight, 700)
}

h1 {
    font-size: var(--text-xxl, 2rem)
}

h2 {
    font-size: var(--text-xl, 1.75rem)
}

h3 {
    font-size: var(--text-lg, 1.375rem)
}

h4 {
    font-size: var(--text-md, 1.125rem)
}

.link, a {
    color: var(--color-primary, #4827ec);
    text-decoration: underline
}

strong {
    font-weight: 700
}

s {
    text-decoration: line-through
}

.text-component h1, .text-component h2, .text-component h3, .text-component h4 {
    line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
    margin-bottom: calc(var(--space-unit) * .3125 * var(--text-space-y-multiplier, 1))
}

.text-component h2, .text-component h3, .text-component h4 {
    margin-top: calc(var(--space-unit) * .9375 * var(--text-space-y-multiplier, 1))
}

.text-component ol li, .text-component p, .text-component ul li {
    line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1))
}

.text-component ol, .text-component p, .text-component ul {
    margin-bottom: calc(var(--space-unit) * .9375 * var(--text-space-y-multiplier, 1))
}

.text-component ol, .text-component ul {
    list-style-position: inside
}

.text-component ol ol, .text-component ol ul, .text-component ul ol, .text-component ul ul {
    padding-left: 1em;
    margin-bottom: 0
}

.text-component ul {
    list-style-type: disc
}

.text-component ol {
    list-style-type: decimal
}

.text-component img {
    display: block;
    margin: 0 auto
}

.text-component figcaption {
    text-align: center;
    margin-top: calc(var(--space-unit) * .5)
}

.text-component > :first-child {
    margin-top: 0
}

.text-component > :last-child {
    margin-bottom: 0
}

:root {
    --icon-xxxs: 8px;
    --icon-xxs: 12px;
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px;
    --icon-xxl: 96px;
    --icon-xxxl: 128px
}

.icon {
    --size: 1em;
    height: var(--size);
    width: var(--size);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial
}

.icon--xxxs {
    --size: var(--icon-xxxs)
}

.icon--xs {
    --size: var(--icon-xs)
}

@-webkit-keyframes icon-spin {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes icon-spin {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

.icon use {
    color: inherit;
    fill: currentColor
}

.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    font-size: var(--btn-font-size, 1em);
    padding-top: var(--btn-padding-y, .5em);
    padding-bottom: var(--btn-padding-y, .5em);
    padding-left: var(--btn-padding-x, .75em);
    padding-right: var(--btn-padding-x, .75em);
    border-radius: var(--btn-radius, .25em)
}

.btn--sm {
    font-size: var(--btn-font-size-sm, .8em)
}

.btn--md {
    font-size: var(--btn-font-size-md, 1.2em)
}

.form-control {
    font-size: var(--form-control-font-size, 1em);
    padding-top: var(--form-control-padding-y, .5em);
    padding-bottom: var(--form-control-padding-y, .5em);
    padding-left: var(--form-control-padding-x, .75em);
    padding-right: var(--form-control-padding-x, .75em);
    border-radius: var(--form-control-radius, .25em)
}

:root {
    --z-index-header: 3;
    --z-index-popover: 5;
    --z-index-fixed-element: 10;
    --z-index-overlay: 15
}

:root {
    --display: block
}

.is-hidden {
    display: none !important
}

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

.flex {
    display: flex
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-column {
    flex-direction: column
}

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

.flex-grow {
    flex-grow: 1
}

.flex-shrink-0 {
    flex-shrink: 0
}

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

.justify-center {
    justify-content: center
}

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

.items-center {
    align-items: center
}

[class*=" aspect-ratio"], [class^=aspect-ratio] {
    --aspect-ratio: calc(16 / 9);
    position: relative;
    height: 0;
    padding-bottom: calc(100% / (var(--aspect-ratio)))
}

[class*=" aspect-ratio"] > *, [class^=aspect-ratio] > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

[class*=" aspect-ratio"] > :not(iframe), [class^=aspect-ratio] > :not(iframe) {
    -o-object-fit: cover;
    object-fit: cover
}

.aspect-ratio-1\:1 {
    --aspect-ratio: calc(1 / 1)
}

.aspect-ratio-3\:4 {
    --aspect-ratio: calc(3 / 4)
}

.inline {
    display: inline
}

.hide {
    display: none
}

.margin-top-xxxs {
    margin-top: var(--space-xxxs)
}

.margin-top-xxs {
    margin-top: var(--space-xxs)
}

.margin-top-xs {
    margin-top: var(--space-xs)
}

.margin-top-sm {
    margin-top: var(--space-sm)
}

.margin-top-lg {
    margin-top: var(--space-lg)
}

.margin-top-xl {
    margin-top: var(--space-xl)
}

.margin-bottom-xxxs {
    margin-bottom: var(--space-xxxs)
}

.margin-bottom-sm {
    margin-bottom: var(--space-sm)
}

.margin-bottom-md {
    margin-bottom: var(--space-md)
}

.margin-bottom-lg {
    margin-bottom: var(--space-lg)
}

.margin-bottom-xxxl {
    margin-bottom: var(--space-xxxl)
}

.margin-right-md {
    margin-right: var(--space-md)
}

.margin-left-xxs {
    margin-left: var(--space-xxs)
}

.margin-left-xs {
    margin-left: var(--space-xs)
}

.margin-left-md {
    margin-left: var(--space-md)
}

.margin-left-lg {
    margin-left: var(--space-lg)
}

.margin-left-auto {
    margin-left: auto
}

.margin-x-xxs {
    margin-left: var(--space-xxs);
    margin-right: var(--space-xxs)
}

.margin-x-xs {
    margin-left: var(--space-xs);
    margin-right: var(--space-xs)
}

.margin-x-auto {
    margin-left: auto;
    margin-right: auto
}

.margin-y-sm {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm)
}

.padding-xs {
    padding: var(--space-xs)
}

.padding-md {
    padding: var(--space-md)
}

.padding-lg {
    padding: var(--space-lg)
}

.padding-top-lg {
    padding-top: var(--space-lg)
}

.padding-bottom-sm {
    padding-bottom: var(--space-sm)
}

.padding-bottom-md {
    padding-bottom: var(--space-md)
}

.padding-bottom-lg {
    padding-bottom: var(--space-lg)
}

.padding-bottom-xl {
    padding-bottom: var(--space-xl)
}

.padding-right-0 {
    padding-right: 0
}

.padding-x-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs)
}

.padding-x-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg)
}

.padding-y-xxs {
    padding-top: var(--space-xxs);
    padding-bottom: var(--space-xxs)
}

.padding-y-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg)
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.text-xs {
    font-size: var(--text-xs, .6875rem)
}

.text-sm {
    font-size: var(--text-sm, .75rem)
}

.text-lg {
    font-size: var(--text-lg, 1.375rem)
}

.text-xl {
    font-size: var(--text-xl, 1.75rem)
}

.text-xxl {
    font-size: var(--text-xxl, 2rem)
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.font-italic {
    font-style: italic
}

.text-center {
    text-align: center
}

.text-space-y-xs {
    --text-space-y-multiplier: 0.5 !important
}

.line-height-sm {
    --heading-line-height: 1.1;
    --body-line-height: 1.2
}

.line-height-sm:not(.text-component) {
    line-height: 1.2
}

.line-height-1 {
    line-height: 1 !important
}

.cursor-pointer {
    cursor: pointer
}

.pointer-events-none {
    pointer-events: none
}

[class*=" color-"], [class^=color-] {
    --color-o: 1
}

.color-contrast-medium {
    color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1))
}

.color-contrast-higher {
    color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--color-o, 1))
}

[class*=" color-gradient"], [class^=color-gradient] {
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text
}

.width-100\% {
    width: 100%
}

.height-xl {
    height: var(--size-xl, 4rem)
}

.height-100\% {
    height: 100%
}

:root {
    --max-width-xxxxs: 20rem;
    --max-width-xxxs: 26rem;
    --max-width-xxs: 32rem;
    --max-width-xs: 38rem;
    --max-width-sm: 48rem;
    --max-width-md: 64rem;
    --max-width-lg: 80rem;
    --max-width-xl: 90rem;
    --max-width-xxl: 100rem;
    --max-width-xxxl: 120rem;
    --max-width-xxxxl: 150rem
}

.max-width-xxxxs {
    max-width: var(--max-width-xxxxs)
}

.max-width-xxxs {
    max-width: var(--max-width-xxxs)
}

.max-width-xxs {
    max-width: var(--max-width-xxs)
}

.max-width-xs {
    max-width: var(--max-width-xs)
}

.max-width-sm {
    max-width: var(--max-width-sm)
}

.max-width-md {
    max-width: var(--max-width-md)
}

.max-width-lg {
    max-width: var(--max-width-lg)
}

[class*=" max-width-adaptive"], [class^=max-width-adaptive] {
    max-width: 32rem
}

.max-height-100\% {
    max-height: 100%
}

.shadow-md {
    box-shadow: var(--shadow-md)
}

:root {
    --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
    --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075)
}

.position-relative {
    position: relative
}

.top-xl {
    top: var(--space-xl)
}

.overflow-auto {
    overflow: auto
}

.opacity-30\% {
    opacity: .3
}

[class*=" border-"], [class^=border-] {
    --border-o: 1
}

.border {
    border: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1))
}

.border-2 {
    --border-width: 2px
}

.radius-md {
    border-radius: var(--radius-md)
}

.radius-lg {
    border-radius: var(--radius-lg)
}

.bg, [class*=" bg-"], [class^=bg-] {
    --bg-o: 1
}

.bg {
    background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--bg-o))
}

.bg-contrast-lower {
    background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--bg-o, 1))
}

.bg-error {
    background-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--bg-o, 1))
}

.bg-black {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--bg-o, 1))
}

.bg-opacity-20\% {
    --bg-o: 0.2
}

.bg-opacity-90\% {
    --bg-o: 0.9
}

[class*=" -rotate"], [class*=" -scale"], [class*=" -skew"] [class^=skew], [class*=" -translate"], [class*=" flip"], [class*=" rotate"], [class*=" scale"], [class*=" skew"], [class*=" translate"], [class^=-rotate], [class^=-scale], [class^=-skew], [class^=-translate], [class^=flip], [class^=rotate], [class^=scale], [class^=translate] {
    --translate: 0;
    --rotate: 0;
    --skew: 0;
    --scale: 1;
    transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)))
}

.visible {
    visibility: visible
}

@media (min-width: 48rem) {
    .hide\@sm {
        display: none !important
    }

    .text-left\@sm {
        text-align: left
    }

    .top-0\@sm {
        top: 0
    }
}

@media not all and (min-width: 48rem) {
    .display\@sm {
        display: none !important
    }
}

@media (min-width: 64rem) {
    .flex-row\@md {
        flex-direction: row
    }

    .margin-top-auto\@md {
        margin-top: auto
    }

    .margin-right-auto\@md {
        margin-right: auto
    }

    .margin-left-md\@md {
        margin-left: var(--space-md)
    }

    .padding-bottom-0\@md {
        padding-bottom: 0
    }

    .padding-x-xl\@md {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl)
    }

    .padding-y-xs\@md {
        padding-top: var(--space-xs);
        padding-bottom: var(--space-xs)
    }

    .text-left\@md {
        text-align: left
    }

    .text-xs\@md {
        font-size: var(--text-xs, .6875rem)
    }

    .text-sm\@md {
        font-size: var(--text-sm, .75rem)
    }
}

@media not all and (min-width: 64rem) {
    .display\@md {
        display: none !important
    }
}

@media (min-width: 80rem) {
    .padding-x-xl\@lg {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl)
    }
}

@media not all and (min-width: 80rem) {
    .display\@lg {
        display: none !important
    }
}

:root {
    --color-primary-darker: hsl(171, 53%, 29%);
    --color-primary-darker-h: 171;
    --color-primary-darker-s: 53%;
    --color-primary-darker-l: 29%;
    --color-primary-dark: hsl(171, 53%, 39%);
    --color-primary-dark-h: 171;
    --color-primary-dark-s: 53%;
    --color-primary-dark-l: 39%;
    --color-primary: hsl(171, 53%, 49%);
    --color-primary-h: 171;
    --color-primary-s: 53%;
    --color-primary-l: 49%;
    --color-primary-light: hsl(171, 53%, 59%);
    --color-primary-light-h: 171;
    --color-primary-light-s: 53%;
    --color-primary-light-l: 59%;
    --color-primary-lighter: hsl(171, 53%, 69%);
    --color-primary-lighter-h: 171;
    --color-primary-lighter-s: 53%;
    --color-primary-lighter-l: 69%;
    --color-accent-darker: hsl(349, 75%, 31%);
    --color-accent-darker-h: 349;
    --color-accent-darker-s: 75%;
    --color-accent-darker-l: 31%;
    --color-accent-dark: hsl(349, 75%, 41%);
    --color-accent-dark-h: 349;
    --color-accent-dark-s: 75%;
    --color-accent-dark-l: 41%;
    --color-accent: hsl(349, 75%, 51%);
    --color-accent-h: 349;
    --color-accent-s: 75%;
    --color-accent-l: 51%;
    --color-accent-light: hsl(349, 75%, 61%);
    --color-accent-light-h: 349;
    --color-accent-light-s: 75%;
    --color-accent-light-l: 61%;
    --color-accent-lighter: hsl(349, 75%, 71%);
    --color-accent-lighter-h: 349;
    --color-accent-lighter-s: 75%;
    --color-accent-lighter-l: 71%;
    --color-black: hsl(240, 8%, 12%);
    --color-black-h: 240;
    --color-black-s: 8%;
    --color-black-l: 12%;
    --color-white: hsl(0, 0%, 100%);
    --color-white-h: 0;
    --color-white-s: 0%;
    --color-white-l: 100%;
    --color-warning-darker: hsl(46, 100%, 47%);
    --color-warning-darker-h: 46;
    --color-warning-darker-s: 100%;
    --color-warning-darker-l: 47%;
    --color-warning-dark: hsl(46, 100%, 50%);
    --color-warning-dark-h: 46;
    --color-warning-dark-s: 100%;
    --color-warning-dark-l: 50%;
    --color-warning: hsl(46, 100%, 61%);
    --color-warning-h: 46;
    --color-warning-s: 100%;
    --color-warning-l: 61%;
    --color-warning-light: hsl(46, 100%, 71%);
    --color-warning-light-h: 46;
    --color-warning-light-s: 100%;
    --color-warning-light-l: 71%;
    --color-warning-lighter: hsl(46, 100%, 80%);
    --color-warning-lighter-h: 46;
    --color-warning-lighter-s: 100%;
    --color-warning-lighter-l: 80%;
    --color-success-darker: hsl(94, 48%, 42%);
    --color-success-darker-h: 94;
    --color-success-darker-s: 48%;
    --color-success-darker-l: 42%;
    --color-success-dark: hsl(94, 48%, 48%);
    --color-success-dark-h: 94;
    --color-success-dark-s: 48%;
    --color-success-dark-l: 48%;
    --color-success: hsl(94, 48%, 56%);
    --color-success-h: 94;
    --color-success-s: 48%;
    --color-success-l: 56%;
    --color-success-light: hsl(94, 48%, 65%);
    --color-success-light-h: 94;
    --color-success-light-s: 48%;
    --color-success-light-l: 65%;
    --color-success-lighter: hsl(94, 48%, 74%);
    --color-success-lighter-h: 94;
    --color-success-lighter-s: 48%;
    --color-success-lighter-l: 74%;
    --color-error-darker: hsl(349, 75%, 36%);
    --color-error-darker-h: 349;
    --color-error-darker-s: 75%;
    --color-error-darker-l: 36%;
    --color-error-dark: hsl(349, 75%, 44%);
    --color-error-dark-h: 349;
    --color-error-dark-s: 75%;
    --color-error-dark-l: 44%;
    --color-error: hsl(349, 75%, 51%);
    --color-error-h: 349;
    --color-error-s: 75%;
    --color-error-l: 51%;
    --color-error-light: hsl(349, 75%, 59%);
    --color-error-light-h: 349;
    --color-error-light-s: 75%;
    --color-error-light-l: 59%;
    --color-error-lighter: hsl(349, 75%, 67%);
    --color-error-lighter-h: 349;
    --color-error-lighter-s: 75%;
    --color-error-lighter-l: 67%;
    --color-bg-darker: hsl(0, 0%, 0%);
    --color-bg-darker-h: 0;
    --color-bg-darker-s: 0%;
    --color-bg-darker-l: 0%;
    --color-bg-dark: hsl(0, 0%, 0%);
    --color-bg-dark-h: 0;
    --color-bg-dark-s: 0%;
    --color-bg-dark-l: 0%;
    --color-bg: hsl(0, 0%, 0%);
    --color-bg-h: 0;
    --color-bg-s: 0%;
    --color-bg-l: 0%;
    --color-bg-light: hsl(0, 0%, 7%);
    --color-bg-light-h: 0;
    --color-bg-light-s: 0%;
    --color-bg-light-l: 7%;
    --color-bg-lighter: hsl(0, 0%, 11%);
    --color-bg-lighter-h: 0;
    --color-bg-lighter-s: 0%;
    --color-bg-lighter-l: 11%;
    --color-contrast-lower: hsl(0, 0%, 6%);
    --color-contrast-lower-h: 0;
    --color-contrast-lower-s: 0%;
    --color-contrast-lower-l: 6%;
    --color-contrast-low: hsl(0, 0%, 16%);
    --color-contrast-low-h: 0;
    --color-contrast-low-s: 0%;
    --color-contrast-low-l: 16%;
    --color-contrast-medium: hsl(0, 0%, 60%);
    --color-contrast-medium-h: 0;
    --color-contrast-medium-s: 0%;
    --color-contrast-medium-l: 60%;
    --color-contrast-high: hsl(0, 0%, 84%);
    --color-contrast-high-h: 0;
    --color-contrast-high-s: 0%;
    --color-contrast-high-l: 84%;
    --color-contrast-higher: hsl(0, 0%, 96%);
    --color-contrast-higher-h: 0;
    --color-contrast-higher-s: 0%;
    --color-contrast-higher-l: 96%
}

:root {
    --space-unit: 1em
}

*, :root {
    --space-xxxxs: calc(0.125 * var(--space-unit));
    --space-xxxs: calc(0.25 * var(--space-unit));
    --space-xxs: calc(0.375 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));
    --space-xxxl: calc(8.5 * var(--space-unit));
    --space-xxxxl: calc(13.75 * var(--space-unit));
    --component-padding: var(--space-md)
}

@supports (--css:variables) {
    @media (min-width: 64rem) {
        :root {
            --space-unit: 1.25em
        }
    }
}

:root {
    --radius: 0.25em
}

:root {
    --font-primary: Barlow, Microsoft JhengHei, system-ui, sans-serif;
    --text-base-size: 0.9375em;
    --text-scale-ratio: 1.2;
    --body-line-height: 1.4;
    --heading-line-height: 1.2;
    --font-primary-capital-letter: 1;
    --text-unit: 1em
}

*, :root {
    --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio))
}

body {
    font-family: var(--font-primary)
}

h1, h2, h3, h4 {
    font-family: var(--font-primary);
    --heading-font-weight: 700
}

.text-component {
    --line-height-multiplier: 1;
    --text-space-y-multiplier: 1
}

.text-component > * {
    --text-unit: 1em;
    --space-unit: 1em
}

.text-component figcaption {
    font-size: var(--text-sm);
    color: var(--color-contrast-low)
}

.article {
    --body-line-height: 1.58;
    --text-space-y-multiplier: 1.2
}

:root {
    --btn-padding-x: var(--space-sm);
    --btn-padding-y: var(--space-xs);
    --btn-radius: 0.375em
}

.btn {
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: var(--shadow-xs);
    transition: all .2s ease;
    will-change: transform
}

.btn:hover {
    box-shadow: var(--shadow-sm)
}

.btn:focus {
    box-shadow: 0 0 0 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), .15);
    outline: 0
}

.btn:active {
    transform: translateY(2px)
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white)
}

.btn--primary:hover {
    background: var(--color-primary-dark)
}

.btn--primary:focus {
    box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2)
}

.btn--subtle {
    background: var(--color-contrast-lower);
    color: var(--color-contrast-higher)
}

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

.btn--sm {
    font-size: .8em
}

.btn--md {
    font-size: 1.2em
}

:root {
    --form-control-font-size: 1em;
    --form-control-padding-x: var(--space-sm);
    --form-control-padding-y: var(--space-xs);
    --form-control-radius: 0.25em
}

.form-control {
    background: var(--color-black);
    color: var(--color-contrast-medium);
    line-height: 1.2;
    box-shadow: none;
    transition: all .2s ease
}

.form-control::-moz-placeholder {
    opacity: 1;
    color: var(--color-contrast-medium)
}

.form-control:-ms-input-placeholder {
    opacity: 1;
    color: var(--color-contrast-medium)
}

.form-control::placeholder {
    opacity: 1;
    color: var(--color-contrast-medium)
}

.form-control:focus {
    color: var(--color-contrast-higher);
    outline: 0
}

.form-control[disabled], .form-control[readonly] {
    cursor: not-allowed
}

.form-control.form-control--error, .form-control[aria-invalid=true] {
    border: 2px solid var(--color-error);
    box-shadow: inset 0 0 0 0 var(--color-accent)
}

.aspect-ratio-16\:10 {
    --aspect-ratio: 16/10
}

@media (min-width: 64rem) {
    .hide-last-2\@md > :nth-last-child(-n+2) {
        display: none
    }
}

@media (min-width: 80rem) {
    .hide-last-2\@lg > :nth-last-child(-n+2) {
        display: none
    }

    .hide-last-3\@lg > :nth-last-child(-n+3) {
        display: none
    }
}

:root {
    --accordion-border-width: 1px;
    --accordion-border-color: var(--color-contrast-lower);
    --accordion-icon-size: 1em;
    --accordion-icon-stroke-width: 1.5px
}

@-webkit-keyframes accordion-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes accordion-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.alert {
    background-color: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * .2));
    color: var(--color-contrast-higher);
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    padding: var(--space-sm)
}

.alert__icon {
    color: var(--color-primary);
    margin-right: var(--space-xxs)
}

.alert--success {
    background-color: hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) * .5))
}

.alert--success .alert__icon {
    color: var(--color-success)
}

.alert--error {
    background-color: hsl(var(--color-error-h), var(--color-error-s), calc(var(--color-error-l) * .5))
}

.alert--error .alert__icon {
    color: var(--color-error)
}

.alert--warning {
    background-color: hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) * .5))
}

.alert--warning .alert__icon {
    color: var(--color-warning)
}

.alert--is-visible {
    position: static;
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none
}

:root {
    --anim-menu-btn-size: 48px;
    --anim-menu-btn-transition-duration: .2s;
    --anim-menu-btn-icon-size: 32px;
    --anim-menu-btn-icon-stroke: 2px
}

.anim-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--anim-menu-btn-size);
    height: var(--anim-menu-btn-size)
}

.anim-menu-btn__icon {
    position: relative;
    display: block;
    font-size: var(--anim-menu-btn-icon-size);
    width: .875em;
    height: var(--anim-menu-btn-icon-stroke);
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    transform: scale(1)
}

.anim-menu-btn__icon::after, .anim-menu-btn__icon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: inherit;
    border-radius: inherit
}

.anim-menu-btn__icon--arrow-right {
    border-radius: 50em;
    will-change: transform;
    transition-property: transform;
    transition-duration: var(--anim-menu-btn-transition-duration, .2s)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
    transform: scale(.9)
}

.anim-menu-btn__icon--arrow-right::after, .anim-menu-btn__icon--arrow-right::before {
    transform-origin: calc(var(--anim-menu-btn-icon-stroke) / 2) 50%;
    will-change: transform, width;
    transition-property: transform, width;
    transition-duration: var(--anim-menu-btn-transition-duration, .2s)
}

.anim-menu-btn__icon--arrow-right::before {
    transform: translateY(-.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-right::after {
    transform: translateY(.25em) rotate(0)
}

.anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg)
}

.anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
    transform: rotate(180deg) scale(.9)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before {
    width: 50%
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before {
    transform: translateY(0) rotate(-45deg)
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after {
    transform: translateY(0) rotate(45deg)
}

.grid-auto-xs {
    display: grid;
    gap: var(--gap-y, 0) var(--gap-x, 0);
    grid-template-columns:repeat(auto-fit, minmax(var(--col-min-width), 1fr))
}

.grid-auto-xs {
    --col-min-width: 6rem
}

:root {
    --fab-transition-duration: .3s;
    --fab-gap-y: var(--space-md);
    --fab-btn-size: 48px;
    --fab-btn-radius: calc(var(--fab-btn-size) / 2);
    --fab-btn-icon-size: 24px;
    --fab-popover-radius: 6px;
    --fab-popover-width: 250px;
    --fab-popover-gap: 6px
}

@media (min-width: 64rem) {
    :root {
        --fab-btn-size: 54px
    }
}

.fab {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: background var(--fab-transition-duration), opacity var(--fab-transition-duration), visibility 0s var(--fab-transition-duration)
}

.fab--in {
    opacity: 1;
    visibility: visible;
    transition: background var(--fab-transition-duration), opacity var(--fab-transition-duration)
}

.fab--active {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), .9);
    pointer-events: auto
}

:root {
    --list-space-y: 0.375em;
    --list-offset: 1em;
    --list-line-height-multiplier: 1
}

.list, .text-component .list {
    padding-left: 0;
    list-style: none
}

.list ol, .list ul, .text-component .list ol, .text-component .list ul {
    list-style: none;
    margin: 0;
    margin-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    padding-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    padding-left: var(--list-offset)
}

.list li, .text-component .list li {
    padding-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    margin-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    line-height: calc(var(--body-line-height) * var(--list-line-height-multiplier))
}

.list ol > li:last-child, .list ul > li:last-child, .list > li:last-child, .text-component .list ol > li:last-child, .text-component .list ul > li:last-child, .text-component .list > li:last-child {
    margin-bottom: 0
}

.list ol > li:last-child, .list ul > li:last-child, .list:not(.list--border) > li:last-child, .text-component .list ol > li:last-child, .text-component .list ul > li:last-child, .text-component .list:not(.list--border) > li:last-child {
    padding-bottom: 0
}

.menu {
    --menu-vertical-gap: 4px;
    --menu-item-padding: var(--space-xxs) var(--space-sm);
    list-style: none;
    width: 180px;
    position: fixed;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-md);
    padding: var(--space-xxs) 0;
    border-radius: var(--radius-md);
    z-index: var(--z-index-popover, 5);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: var(--menu-vertical-gap);
    margin-bottom: var(--menu-vertical-gap);
    overflow: auto;
    font-size: var(--text-base-size);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .2s, opacity .2s
}

.menu--is-visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity .2s
}

.menu__content {
    display: block;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: var(--menu-item-padding);
    color: var(--color-contrast-high);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .2s
}

.menu__content:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), .075)
}

.menu__content:focus {
    outline: 0;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .15)
}

.menu__separator {
    height: 1px;
    background-color: var(--color-contrast-low);
    margin: var(--menu-item-padding)
}

.menu__icon {
    color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), .5);
    margin-right: var(--space-xxs)
}

.modal {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.modal:not(.modal--is-visible) {
    pointer-events: none;
    background-color: transparent
}

.modal--is-visible {
    opacity: 1;
    visibility: visible
}

.modal__close-btn {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    transition: .2s
}

.modal__close-btn .icon {
    display: block;
    margin: auto
}

.modal__close-btn--inner {
    --size: 32px;
    width: var(--size);
    height: var(--size);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: .2s
}

.modal__close-btn--inner .icon {
    color: inherit
}

.modal__close-btn--inner:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md)
}

:root {
    --modal-transition-duration: 0.2s
}

@media (prefers-reduced-motion: no-preference) {
    .modal--animate-scale, .modal--animate-translate-up {
        --modal-transition-duration: .2s;
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-scale .modal__content, .modal--animate-translate-up .modal__content {
        will-change: transform;
        transition: transform var(--modal-transition-duration) var(--ease-out)
    }

    .modal--animate-scale.modal--is-visible, .modal--animate-translate-up.modal--is-visible {
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s
    }

    .modal--animate-scale.modal--is-visible .modal__content, .modal--animate-translate-up.modal--is-visible .modal__content {
        transform: scale(1)
    }

    .modal--animate-scale .modal__content {
        transform: scale(.95)
    }

    .modal--animate-translate-up .modal__content {
        transform: translateY(40px)
    }
}

:root {
    --off-canvas-panel-width: 400px;
    --off-canvas-panel-width-opposite: -400px;
    --off-canvas-animation-duration: 0.4s
}

.off-canvas {
    overflow: hidden
}

.off-canvas__main {
    position: relative;
    z-index: 2;
    background-color: var(--color-bg);
    padding-top: calc(var(--space-xl) * 2);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    transition: transform var(--off-canvas-animation-duration) var(--ease-in-out)
}

.off-canvas--visible .off-canvas__main {
    transform: translateX(100%)
}

@media (min-width: 32rem) {
    .off-canvas--visible:not(.off-canvas--full-width) .off-canvas__main {
        transform: translateX(var(--off-canvas-panel-width))
    }
}

.js .off-canvas__panel {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: calc(var(--space-xl) * 2);
    visibility: hidden;
    background-color: var(--color-bg-dark);
    transition: visibility var(--off-canvas-animation-duration)
}

.js .off-canvas__panel:focus {
    outline: 0
}

@media (min-width: 32rem) {
    .js .off-canvas:not(.off-canvas--full-width) .off-canvas__panel {
        width: var(--off-canvas-panel-width)
    }
}

.js .off-canvas__content {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-50%);
    will-change: transform;
    transition: transform var(--off-canvas-animation-duration) var(--ease-in-out)
}

.js .off-canvas--visible .off-canvas__panel {
    visibility: visible
}

.js .off-canvas--visible .off-canvas__content {
    transform: translateX(0)
}

@media (min-width: 64rem) {
    .off-canvas--full-width {
        --off-canvas-animation-duration: 0.65s
    }
}

.pagination__list > li {
    display: inline-block
}

.pagination__item {
    display: inline-block;
    display: inline-flex;
    height: 100%;
    align-items: center;
    padding: var(--space-xs) calc(1.355 * var(--space-xs));
    white-space: nowrap;
    line-height: 1;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-contrast-high);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform;
    transition: .2s
}

.pagination__item:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), .1)
}

.pagination__item:active {
    transform: translateY(2px)
}

.pagination__item--selected {
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    box-shadow: var(--shadow-sm)
}

.pagination__item--disabled {
    opacity: .5;
    pointer-events: none
}

.pagination--load-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xxxs)
}

.pagination--load-more button {
    line-height: 1.58;
    border: 1px solid var(--color-contrast-medium)
}

.pagination--load-more button:hover {
    border-color: var(--color-contrast-high)
}

:root {
    --popover-width: 250px;
    --popover-control-gap: 4px;
    --popover-viewport-gap: 20px;
    --popover-transition-duration: 0.2s
}

.popover {
    position: fixed;
    width: var(--popover-width);
    z-index: var(--z-index-popover, 5);
    margin-top: var(--popover-control-gap);
    margin-bottom: var(--popover-control-gap);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s var(--popover-transition-duration), opacity var(--popover-transition-duration)
}

.popover--is-visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity var(--popover-transition-duration)
}

.pre-header--is-hidden {
    display: none
}

:root {
    --checkbox-radio-size: 18px;
    --checkbox-radio-gap: var(--space-xxs);
    --checkbox-radio-border-width: 1px;
    --checkbox-radio-line-height: var(--body-line-height);
    --radio-marker-size: 8px;
    --checkbox-marker-size: 12px;
    --checkbox-radius: 4px
}

.checkbox {
    position: absolute;
    padding: 0;
    margin: 0;
    margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
    opacity: 0;
    height: var(--checkbox-radio-size);
    width: var(--checkbox-radio-size);
    pointer-events: none
}

.checkbox + label {
    display: inline-block;
    line-height: var(--checkbox-radio-line-height);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap))
}

.checkbox + label::before {
    content: "";
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    top: -.1em;
    margin-left: calc(-1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap)));
    flex-shrink: 0;
    width: var(--checkbox-radio-size);
    height: var(--checkbox-radio-size);
    background-color: var(--color-bg);
    border-width: var(--checkbox-radio-border-width);
    border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), .65);
    border-style: solid;
    box-shadow: var(--shadow-xs);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--checkbox-radio-gap);
    transition: transform .2s, border .2s
}

.checkbox:not(:checked):not(:focus) + label:hover::before {
    border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), 1)
}

.checkbox + label::before {
    border-radius: var(--checkbox-radius)
}

.checkbox:checked + label::before {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-xs);
    border-color: var(--color-primary);
    transition: transform .2s
}

.checkbox:active + label::before {
    transform: scale(.8);
    transition: transform .2s
}

.checkbox:checked:active + label::before {
    transform: none;
    transition: none
}

.checkbox:checked + label::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMicgdmlld0JveD0nMCAwIDEyIDEyJz48cG9seWxpbmUgcG9pbnRzPScxIDYuNSA0IDkuNSAxMSAyLjUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0ZGRkZGRicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJyBzdHJva2Utd2lkdGg9JzInLz48L3N2Zz4=);
    background-size: var(--checkbox-marker-size)
}

.checkbox:checked:active + label::before, .checkbox:focus + label::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2)
}

:root {
    --search-input-btn-width: 2.2em;
    --search-input-icon-size: 1em;
    --search-input-shortcut-margin: var(--space-xxs)
}

.search-input {
    position: relative
}

.search-input__input {
    width: 100%;
    height: 100%;
    min-height: 32px;
    padding: var(--space-xxs)
}

.search-input__input::-webkit-search-cancel-button, .search-input__input::-webkit-search-decoration, .search-input__input::-webkit-search-results-button, .search-input__input::-webkit-search-results-decoration {
    -webkit-appearance: none
}

.search-input__input::-ms-clear, .search-input__input::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

.search-input--icon-left .search-input__input {
    padding-left: var(--search-input-btn-width)
}

.search-input__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--search-input-btn-width)
}

.search-input__btn:active .icon {
    transform: translateY(2px)
}

.search-input__btn .icon {
    display: block;
    --size: var(--search-input-icon-size);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-contrast-medium);
    transition: .2s
}

.search-input--icon-left .search-input__btn {
    left: 0;
    right: auto;
    pointer-events: none
}

.search-input .search-input__input:focus + .search-input__btn .icon, .search-input__btn:focus .icon {
    color: var(--color-white)
}

html {
    scroll-behavior: smooth
}

:root {
    --accordion-v2-icon-size: 1em;
    --accordion-v2-icon-stroke-width: 1.5px
}

@-webkit-keyframes accordion-v2-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes accordion-v2-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.full-screen-select__option {
    display: block;
    font-size: var(--text-lg);
    color: var(--color-contrast-high);
    padding: var(--space-xxxs) var(--space-sm);
    border-radius: var(--radius-md);
    transition: .2s
}

.full-screen-select__option:hover:not(.full-screen-select__option--selected) {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), .075)
}

.full-screen-select__option--selected {
    color: var(--color-white);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.offnav-control {
    --anim-menu-btn-size: 48px;
    --anim-menu-btn-icon-size: 24px;
    --anim-menu-btn-icon-stroke: 2px;
    position: absolute;
    top: .575em;
    left: .375em;
    z-index: var(--z-index-fixed-element, 10);
    border-radius: 50%;
    transition: transform .3s var(--ease-in-out);
    color: var(--color-contrast-high)
}

.offnav-control.anim-menu-btn--state-b {
    transform: rotate(180deg)
}

.offnav-control__bg {
    display: block;
    fill: var(--color-bg);
    stroke-width: 1.5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.offnav-control--ready-to-animate circle {
    transition: stroke-dashoffset .3s 0s
}

.anim-menu-btn--state-b.offnav-control circle {
    stroke-dashoffset: 0;
    transition-delay: .3s
}

.offnav__link {
    color: var(--color-contrast-higher);
    text-decoration: none;
    background-size: 0 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent 60%, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2) 60%);
    will-change: background-size;
    transition: background-size .3s var(--ease-in-out), color .3s
}

.offnav__link:hover, .offnav__link[aria-current=page] {
    color: var(--color-primary)
}

.offnav__link:hover {
    background-size: 100% 100%
}

.offnav__a11y-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: var(--z-index-fixed-element, 10);
    background-color: var(--color-contrast-lower);
    padding: var(--space-sm) var(--space-md);
    box-shadow: var(--shadow-lg);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%)
}

.offnav__a11y-close-btn:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    outline: 3px solid var(--color-primary)
}

@media (min-width: 64rem) {
    .offnav__label::before {
        content: "";
        display: inline-block;
        width: 2em;
        height: 1px;
        background-color: currentColor;
        vertical-align: middle;
        margin-right: .5em
    }

    .offnav__subnav {
        border-top: 1px solid var(--color-contrast-lower)
    }
}

html:not(.js) .offnav-control {
    display: none
}

:root {
    --toc-border-width: 1px
}

.toc {
    --space-unit: 1rem
}

.toc__link--selected {
    color: var(--color-primary)
}

.toc__link--selected:hover {
    color: var(--color-primary)
}

.toc:not(.toc--static) {
    border-radius: var(--radius-md);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: .3s
}

.toc:not(.toc--static):hover {
    box-shadow: var(--inner-glow), var(--shadow-md)
}

.toc--static {
    box-shadow: inset var(--toc-border-width) 0 0 var(--color-contrast-lower)
}

.toc--static[class*=position-sticky] {
    top: var(--space-md);
    max-height: calc(100vh - var(--space-md) * 2);
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.toc--static .toc__link--selected::before {
    background-color: var(--color-primary)
}

@-webkit-keyframes toc-target {
    0%, 50% {
        outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .5)
    }
    100% {
        outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0)
    }
}

@keyframes toc-target {
    0%, 50% {
        outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .5)
    }
    100% {
        outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0)
    }
}

@-webkit-keyframes toc-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes toc-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

[class*=toc--static]::before {
    display: none;
    content: "collapsed"
}

.p-article > :first-child {
    margin-top: 0
}

.p-article .title {
    margin-bottom: var(--space-sm)
}

.p-article p, .p-article ul {
    color: var(--color-contrast-medium);
    margin-bottom: var(--space-md)
}

.p-article ul {
    list-style-type: lower-alpha;
    list-style-position: inside
}

:root {
    --avatar-sm: 24px;
    --avatar-md: 48px;
    --avatar-lg: 76px
}

.avatar {
    --avatar-size: 32px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--color-contrast-medium);
    color: var(--color-contrast-high);
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    overflow: hidden
}

.avatar span {
    font-weight: 500;
    line-height: 1
}

.avatar .icon {
    width: var(--avatar-size);
    height: var(--avatar-size)
}

.avatar--md {
    --avatar-size: var(--avatar-md)
}

.avatar--lg {
    --avatar-size: var(--avatar-lg)
}

.card-cat-v1__link {
    text-decoration: none
}

.card-cat-v1__link figure {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: opacity .3s
}

.card-cat-v1__link:hover figure {
    opacity: .9
}

.card-cat-v1__link:hover .card-cat-v1__title {
    color: var(--color-contrast-higher)
}

.card-cat-v1__link--box span {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-contrast-high)
}

.card-cat-v1__link--box .icon {
    color: var(--color-contrast-high)
}

.card-cat-v1__link--circle figure, .card-cat-v1__link--circle span {
    border-radius: 50%
}

.card-cat-v1__title {
    display: block;
    color: var(--color-contrast-high);
    font-size: var(--text-sm);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: color .3s
}

.card-cat-v2__link {
    transition: opacity .3s
}

.card-cat-v2__link figure {
    border-radius: var(--radius-md);
    overflow: hidden
}

.card-cat-v2__link:hover {
    opacity: .9
}

.card-cat-v2__count {
    position: absolute;
    background: linear-gradient(hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), .48), hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0));
    background-blend-mode: multiply;
    background-position-y: -1px;
    bottom: -1px;
    color: var(--color-white);
    font-size: var(--text-sm);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0;
    height: auto;
    width: 100%;
    padding: var(--space-sm) var(--space-sm) var(--space-unit)
}

.card-cat-v2__title {
    position: absolute;
    background: linear-gradient(hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0), hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), .78));
    background-blend-mode: multiply;
    color: var(--color-white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: auto;
    bottom: 0;
    height: auto;
    width: 100%;
    padding: var(--space-sm)
}

.card-video.selected figure:before {
    content: "";
    position: absolute;
    box-shadow: inset 0 0 0 3px var(--color-primary);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: var(--z-index-popover)
}

.card-video__img {
    transition: opacity .3s
}

.card-video__img figure {
    border-radius: var(--radius-md);
    overflow: hidden
}

.card-video__img:hover {
    opacity: .9
}

.card-video__img__album {
    display: flex
}

.card-video__img__album__left {
    flex: 2;
    background-size: cover;
    background-position: center;
    margin-right: var(--space-xxxs)
}

.card-video__img__album__right {
    flex: 1;
    display: flex;
    flex-direction: column
}

.card-video__img__album__right > div {
    flex: 1;
    background-size: cover;
    background-position: center
}

.card-video__img__album__right > div:first-child {
    margin-bottom: var(--space-xxxs)
}

.card-video__duration {
    position: absolute;
    background: linear-gradient(hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0), hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), .78));
    background-blend-mode: multiply;
    color: var(--color-white);
    font-size: var(--text-sm);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    text-align: right;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: auto;
    bottom: 0;
    height: auto;
    width: 100%;
    padding: var(--space-sm)
}

@media (min-width: 32rem) {
    .card-video__duration {
        padding: var(--space-md) var(--space-unit) var(--space-sm)
    }
}

.card-video__title {
    font-size: var(--text-base-size);
    font-weight: 400
}

.card-video__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--color-contrast-higher);
    text-decoration: none;
    text-overflow: ellipsis;
    letter-spacing: .02em;
    overflow: hidden
}

.card-video__title a:hover {
    text-decoration: underline
}

.card-video__stats {
    display: flex;
    align-items: center;
    color: var(--color-contrast-medium);
    font-size: var(--text-sm)
}

.card-video__stats span {
    display: flex;
    align-items: center;
    margin-right: var(--space-sm)
}

.card-video__stats .icon, .card-video__stats .num {
    margin-right: var(--space-xxs)
}

.card-video__fav-button {
    cursor: pointer
}

.card-video__fav-button.active .icon, .card-video__fav-button:hover .icon {
    color: var(--color-accent)
}

:root {
    --emoji-box-emoji-size: 3.25em;
    --emoji-box-emoji-text-line-height: 1.75
}

.emoji-box {
    --gap-x: 0;
    --gap-y: 0;
    position: absolute;
    list-style: none;
    z-index: var(--z-index-popover);
    width: 100%;
    background-color: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) * .5));
    text-align: center;
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: var(--space-xs) var(--space-md);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .2s, opacity .2s
}

.emoji-box:focus {
    outline: 0
}

.emoji-box--is-visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity .2s
}

.emoji-box--is-visible.form-control {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset
}

.emoji-box__emoji-text {
    display: block;
    line-height: var(--emoji-box-emoji-text-line-height);
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
    padding: var(--space-xxxs);
    margin: var(--space-xxxxs);
    cursor: pointer;
    transition: background-color .2s
}

.emoji-box__emoji-text:hover {
    background-color: var(--color-contrast-low)
}

.p-footer {
    text-align: center;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl)
}

.p-footer__nav-list {
    display: flex;
    justify-content: center;
    align-items: center
}

.p-footer__nav {
    margin-bottom: var(--space-md)
}

.p-footer__nav-item {
    display: inline-block;
    margin: var(--space-xxxs) var(--space-xs)
}

.p-footer__nav-item a {
    color: var(--color-contrast-high);
    font-size: var(--text-sm)
}

.p-footer__nav-item a:hover {
    color: var(--color-primary)
}

.p-footer__logo {
    margin-bottom: var(--space-sm)
}

.p-footer__print {
    color: var(--color-contrast-medium);
    font-size: var(--text-xs);
    margin-bottom: var(--space-sm)
}

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

.p-footer__socials a {
    display: inline-block;
    color: var(--color-contrast-medium);
    margin: 0 var(--space-xxxs)
}

.p-footer__socials a:hover {
    color: var(--color-contrast-high)
}

:root {
    --label-input-height: 4em;
    --label-input-radius: var(--btn-radius);
    --label-input-label-padding-top: 1em;
    --label-input-label-padding-left: 2.1875em;
    --label-input-input-padding-top: 1.75em;
    --label-input-input-padding-bottom: 0.5em;
    --label-input-input-padding-x: 1.5em;
    --label-input-btn-width: 3.5em;
    --label-input-icon-size: 18px
}

.label-input {
    position: relative
}

.label-input__input {
    width: 100%;
    padding: var(--label-input-input-padding-top) var(--label-input-input-padding-x) var(--label-input-input-padding-bottom);
    border-radius: var(--label-input-radius)
}

.label-input__input:not(textarea) {
    height: var(--label-input-height)
}

.label-input__input::-moz-placeholder {
    font-weight: 700;
    opacity: .5
}

.label-input__input:-ms-input-placeholder {
    font-weight: 700;
    opacity: .5
}

.label-input__input::placeholder {
    font-weight: 700;
    opacity: .5
}

.label-input__input:focus {
    background-color: transparent
}

.label-input__input:focus:not(.form-control[aria-invalid=true]):not(.form-control--error) {
    box-shadow: inset 0 0 0 2px var(--color-primary)
}

.label-input__input:focus + .label-input__label {
    color: var(--color-contrast-higher)
}

.label-input__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--label-input-btn-width);
    cursor: pointer
}

.label-input__btn + .label-input__input {
    padding-right: var(--label-input-btn-width)
}

.label-input__btn:hover .icon {
    color: var(--color-contrast-high)
}

.label-input__btn:active .icon {
    transform: translateY(2px)
}

.label-input__btn .icon {
    display: block;
    color: var(--color-contrast-medium);
    width: var(--label-input-icon-size);
    height: var(--label-input-icon-size);
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
    transition: color .2s
}

.label-input__label {
    position: absolute;
    top: var(--label-input-label-padding-top);
    left: var(--label-input-label-padding-left);
    color: var(--color-contrast-medium);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
    transition: color .2s
}

.modal-v2 {
    --checkbox-radio-size: 16px;
    display: flex;
    align-items: flex-end;
    background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), .9)
}

.modal-v2 .modal__content {
    background-color: var(--color-bg);
    width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: var(--shadow-md)
}

.modal-v2 .modal__close-btn {
    position: absolute;
    top: 0;
    right: 0
}

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

.profile__info figure {
    margin-right: var(--space-md)
}

.profile__title {
    display: flex;
    align-items: center
}

.profile__title a {
    display: flex;
    color: var(--color-contrast-medium);
    padding: var(--space-xxs)
}

.profile__title a:hover {
    color: var(--color-contrast-higher)
}

.profile__title .icon {
    --size: var(--icon-xs)
}

.profile__badge {
    display: inline-flex;
    align-items: center;
    color: var(--color-contrast-high);
    font-size: var(--text-sm);
    border: 1px solid var(--color-contrast-high);
    border-radius: 2em;
    padding-top: var(--space-xxxs);
    padding-bottom: var(--space-xxxs);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm)
}

.profile__badge .icon {
    --size: var(--icon-xxs);
    margin-right: var(--space-xxs)
}

.profile__badge--sponsor {
    color: var(--color-primary);
    border-color: var(--color-primary)
}

.profile__badge--inactive {
    color: var(--color-error);
    border-color: var(--color-error)
}

.profile__badge--subscribe {
    color: var(--color-contrast-higher);
    border-color: var(--color-contrast-medium);
    cursor: pointer
}

.profile__badge--subscribe:hover {
    border-color: var(--color-contrast-high)
}

.profile__badge--subscribe.active {
    background-color: var(--color-contrast-lower);
    border-color: var(--color-contrast-low)
}

.profile__badge--subscribe.active:hover {
    color: var(--color-contrast-high)
}

.profile__nav {
    display: flex;
    justify-content: center;
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: var(--space-unit)
}

.profile__nav > li.active a {
    color: var(--color-contrast-higher)
}

.profile__nav > li:not(:last-child) {
    margin-right: var(--space-md)
}

.profile__nav a {
    display: flex;
    align-items: center;
    color: var(--color-contrast-medium);
    text-decoration: none
}

.profile__nav a:hover {
    color: var(--color-contrast-higher)
}

.profile__nav span {
    color: var(--color-contrast-medium);
    font-size: var(--text-xs);
    font-weight: 400;
    margin-left: var(--space-xs)
}

.select {
    position: relative
}

.select select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.select--minimal {
    display: flex;
    align-items: baseline;
    white-space: nowrap
}

.select--minimal > div {
    position: relative
}

.select--minimal label {
    color: var(--color-contrast-medium);
    font-size: var(--text-sm);
    margin-right: var(--space-xs)
}

.select--minimal button {
    display: inline-flex;
    align-items: center;
    color: var(--color-contrast-high);
    font-size: var(--text-sm);
    text-decoration: underline
}

:root {
    --starring-btn-width: 6em
}

.starring {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md)
}

.starring__info {
    display: flex;
    align-items: center
}

.starring__avatar {
    margin-right: var(--space-sm);
    text-decoration: none;
    transition: opacity .2s
}

.starring__avatar:hover {
    opacity: .75
}

.starring__title a {
    color: var(--color-contrast-higher);
    text-decoration: none;
    text-overflow: ellipsis;
    letter-spacing: .02em
}

.starring__title a:hover {
    text-decoration: underline
}

.starring__desc {
    color: var(--color-contrast-medium);
    font-size: var(--text-sm)
}

.starring__desc .breaking {
    color: var(--color-accent);
    margin-left: var(--space-xxs)
}

.starring__btn {
    width: var(--starring-btn-width);
    color: var(--color-contrast-higher);
    font-size: var(--text-sm);
    border: 1px solid var(--color-contrast-medium)
}

.starring__btn:hover {
    border-color: var(--color-contrast-high)
}

.starring__btn.active {
    background-color: var(--color-contrast-lower);
    border-color: var(--color-contrast-low)
}

.starring__btn.active:hover {
    color: var(--color-contrast-high)
}

.title--hero {
    display: flex;
    align-items: center;
    color: var(--color-contrast-higher);
    font-size: var(--text-xl);
    margin-bottom: var(--space-unit)
}

.title--hero span {
    font-size: var(--text-xs);
    font-weight: 500;
    margin-left: var(--space-sm)
}

@media (min-width: 32rem) {
    .title--hero {
        font-size: var(--text-xxl)
    }
}

.title--listing {
    display: flex;
    align-items: center;
    color: var(--color-contrast-higher);
    font-size: var(--text-md);
    margin-bottom: var(--space-unit)
}

.title--listing a {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none
}

.title--listing a .icon {
    margin-left: var(--space-xxxxs);
    transition: margin .3s
}

.title--listing a:hover {
    text-decoration: underline
}

.title--listing a:hover .icon {
    margin-left: var(--space-xxxs)
}

.title--sub-title {
    color: var(--color-contrast-medium);
    font-size: var(--text-sm);
    font-weight: 400;
    margin-bottom: var(--space-sm)
}

.title--sub-title span[role=separator] {
    margin-left: var(--space-xxxs);
    margin-right: var(--space-xxxs);
    opacity: .6
}

:root {
    --p-comments-author-avatar-size: 32px;
    --p-comments-author-content-gap: var(--space-xs);
    --p-comments-gap: var(--space-md)
}

.p-comments .label-input {
    margin-bottom: var(--p-comments-gap)
}

.p-comments__count {
    font-size: var(--text-xs);
    border: 2px solid var(--color-contrast-medium);
    border-radius: var(--space-xs) var(--space-xs) 0 var(--space-xs);
    margin-left: var(--space-sm);
    padding: var(--space-xxxxs) var(--space-xxs)
}

.p-comments__list {
    position: relative;
    width: 100%;
    max-height: 22em;
    overflow-y: auto
}

.p-comments__comment {
    display: flex;
    align-items: flex-start
}

.p-comments__comment:not(:last-child) {
    margin-bottom: var(--p-comments-gap)
}

.p-comments__author-avatar {
    margin-right: var(--p-comments-author-content-gap);
    text-decoration: none;
    transition: opacity .2s
}

.p-comments__author-avatar:hover {
    opacity: .75
}

.p-comments__author-name {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-contrast-higher)
}

.p-comments__author-name:hover {
    text-decoration: underline
}

.p-comments__author-name--sponsor {
    color: var(--color-primary)
}

.p-comments__action-btn {
    color: var(--color-contrast-medium)
}

.p-comments__action-btn:hover {
    color: var(--color-contrast-higher);
    cursor: pointer;
    text-decoration: underline
}

.p-comments__time {
    color: var(--color-contrast-medium)
}

.p-comments__inline-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-contrast-low)
}

.p-header {
    /*position: fixed;*/
    background-color: var(--color-bg);
    width: 100%;
    z-index: var(--z-index-header)
}

.p-header__wrapper {
    display: flex;
    align-items: center
}

.p-header__wrapper--left, .p-header__wrapper--right {
    flex-grow: 1;
    flex-shrink: 0
}

@media (min-width: 32rem) {
    .p-header__wrapper--left, .p-header__wrapper--right {
        flex-basis: 0%
    }
}

.p-header__link {
    display: block;
    display: flex;
    align-items: center;
    color: var(--color-contrast-high);
    text-decoration: none;
    padding: var(--space-xs)
}

.p-header__link:hover, .p-header__link[aria-current=page] {
    color: var(--color-contrast-higher)
}

.p-header__link--icon {
    position: relative;
    border-radius: var(--radius-lg)
}

.p-header__link--icon .icon {
    width: 18px;
    height: 18px;
    z-index: 2
}

.p-header__link--icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: inherit;
    background-color: var(--color-black);
    transform: scale(0);
    transition: transform .3s var(--ease-out)
}

.p-header__link--icon:hover:before {
    transform: scale(1)
}

.p-header__link--avatar {
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    transition: opacity .2s
}

.p-header__link--avatar:hover {
    opacity: .75
}

.carousel {
    display: flex;
    overflow: scroll;
    scrollbar-width: none
}

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

.carousel--card > * {
    flex: 1 0 4em;
    margin-right: var(--space-md)
}

.carousel--text {
    align-items: center
}

.carousel--text > * {
    white-space: nowrap
}

.content-details__header {
    display: flex;
    flex-direction: column
}

.content-details__header .text-component {
    margin-bottom: var(--space-md)
}

@media (min-width: 48rem) {
    .content-details__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start
    }

    .content-details__header .text-component {
        margin-bottom: 0
    }
}

.content-details__title {
    font-size: var(--text-md)
}

@media (min-width: 32rem) {
    .content-details__title {
        font-size: var(--text-lg)
    }
}

.content-details__meta {
    color: var(--color-contrast-medium);
    font-size: var(--text-sm)
}

.content-details__meta a {
    color: var(--color-contrast-high);
    text-decoration: none;
    transition: .2s
}

.content-details__meta a:hover {
    color: var(--color-primary)
}

.content-details__meta span[role=separator]:not(:last-child) {
    display: inline-block;
    width: 4px;
    height: 4px;
    vertical-align: middle;
    background-color: var(--color-contrast-low);
    border-radius: 50%;
    margin: 0 var(--space-xs)
}

.content-details__menu-bar {
    list-style: none;
    display: inline-flex;
    align-items: center;
    margin-left: -.625em;
    margin-right: -.625em
}

.content-details__menu-bar__item {
    position: relative;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-contrast-high);
    height: 2.5em;
    width: 2.5em;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s
}

.content-details__menu-bar__item:hover {
    background-color: var(--color-contrast-lower);
    color: var(--color-contrast-higher)
}

.content-details__menu-bar__item:hover > .content-details__menu-bar__label {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    width: auto
}

.content-details__menu-bar__item:focus {
    outline: 0;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .1)
}

.content-details__menu-bar__item:active {
    background-color: var(--color-contrast-low)
}

.content-details__menu-bar__item:focus:active {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2)
}

.content-details__menu-bar__item .icon {
    --size: 18px
}

@media (min-width: 48rem) {
    .content-details__menu-bar {
        margin-left: -.5em;
        margin-right: -.5em
    }

    .content-details__menu-bar__item {
        height: 2.25em;
        width: 2.25em
    }
}

.content-details__menu-bar__label {
    position: absolute;
    z-index: var(--z-index-popover);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(var(--space-xxs));
    padding: var(--space-xxs) var(--space-xs);
    color: var(--color-bg);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), .95);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.content-details__menu-bar__counter {
    position: absolute;
    color: var(--color-white);
    font-size: var(--text-xs);
    top: var(--space-xxxs);
    right: var(--space-xxs);
    transform: translate(50%, -50%)
}

.content-details__menu-bar__item--fav-button.active, .content-details__menu-bar__item--fav-button:hover {
    color: var(--color-accent)
}

.content-details__menu-bar__item--fav-button.active .content-details__menu-bar__counter, .content-details__menu-bar__item--fav-button:hover .content-details__menu-bar__counter {
    color: var(--color-accent)
}

/*!* Toastify js 1.10.0
* https://github.com/apvarun/toastify-js
* @license MIT licensed
*
* Copyright (C) 2018 Varun A P*/
.toastify {
    position: fixed;
    opacity: 0;
    transition: all .4s cubic-bezier(.215, .61, .355, 1);
    z-index: 2147483647
}

.toastify.on {
    opacity: 1
}

.toast-close {
    opacity: .4;
    padding: 0 5px
}

.toastify-right {
    right: 15px
}

.toastify-left {
    left: 15px
}

.toastify-top {
    top: -150px
}

.toastify-bottom {
    bottom: -150px
}

.toastify-avatar {
    width: 1.5em;
    height: 1.5em;
    margin: -7px 5px;
    border-radius: 2px
}

@media only screen and (max-width: 360px) {
    .toastify-left, .toastify-right {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content
    }
}

:root {
    --plyr-color-main: var(--color-primary)
}

* {
    -webkit-overflow-scrolling: touch
}

.grecaptcha-badge {
    visibility: hidden
}

.empty-state-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center
}

.empty-state-wrapper h5 {
    font-weight: 700;
    margin-bottom: var(--space-sm)
}

.empty-state-wrapper span {
    color: var(--color-contrast-medium);
    font-size: var(--text-sm);
    letter-spacing: .02em
}

.sponsor {
    display: flex;
    justify-content: center
}

.sponsor > a, .sponsor > div, .sponsor > iframe {
    margin-top: var(--space-lg)
}

.video-container {
    width: 100%;
    height: 56.25vw; /* 16:9比例下的高度 (9/16 = 0.5625) */
    max-height: 70vh; /* 防止在宽屏下过高 */
    position: relative;
    margin: 0 auto;
    background: #000;
}