@layer figreset,
figoverridable,
reset,
theme,
base,
figutils,
components,
utilities;

@layer figreset {
    :root {
        --100dvw: 100vw;
        --100dvh: 100vh
    }

    @supports (width:100dvw) {
        :root {
            --100dvw: 100dvw;
            --100dvh: 100dvh
        }
    }
}

@layer figreset {
    :root {
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")
    }

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

    html {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        width: 100%
    }

    html:has(#responsive-scaler) {
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    body {
        margin: 0;
        width: 100%
    }

    body:has([data-page-overflowx='hidden']) {
        overflow-x: hidden
    }

    body:has([data-page-overflowx='auto']) {
        overflow-x: auto
    }

    #container {
        width: 100%
    }

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

    button {
        border: none;
        background: none;
        padding: 0
    }

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

    blockquote,
    dl,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    figure,
    p,
    pre {
        margin: 0
    }

    ol,
    ul,
    menu {
        list-style: none;
        margin: 0;
        padding-inline-start: 1.5em
    }

    #container .textContents {
        color: #ffffff00
    }

    #container .textContents.hangingList>ul,
    #container .textContents.hangingList>ol {
        margin-left: -1.5em
    }

    #container .textContents>:not(:last-child) {
        margin-bottom: var(--paragraph-spacing)
    }

    #container .textContents>:is(ul, ol):not(:last-child):has(+:is(ul, ol)) {
        margin-bottom: var(--list-spacing)
    }

    #container .textContents li {
        margin-bottom: var(--list-spacing)
    }

    #container .textContents>:is(ol, ul):is(:last-child, :has(+ div))>li:last-child,
    #container .textContents>:is(ol, ul):is(:last-child, :has(+ div))>:is(ol, ul):last-child>li:last-child,
    #container .textContents>:is(ol, ul):is(:last-child, :has(+ div))>:is(ol, ul):last-child>:is(ol, ul):last-child>li:last-child,
    #container .textContents>:is(ol, ul):is(:last-child, :has(+ div))>:is(ol, ul):last-child>:is(ol, ul):last-child>:is(ol, ul):last-child>li:last-child,
    #container .textContents>:is(ol, ul):is(:last-child, :has(+ div))>:is(ol, ul):last-child>:is(ol, ul):last-child>:is(ol, ul):last-child>:is(ol, ul):last-child>li:last-child {
        margin-bottom: 0
    }

    #container .textClip {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent !important
    }

    #container .textClip>* {
        -webkit-text-fill-color: initial
    }

    #container .embed {
        border: none
    }

    #container .marquee-container {
        overflow-x: hidden;
        display: flex;
        flex-direction: row;
        position: relative;
        width: var(--width);
        transform: var(--transform);

        &:hover div {
            animation-play-state: var(--pause-on-hover)
        }

        &:active div {
            animation-play-state: var(--pause-on-click)
        }
    }

    #container .marquee {
        flex: 0 0 auto;
        min-width: var(--min-width);
        display: flex;
        flex-direction: row;
        align-items: center;
        animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
        animation-delay: var(--delay);
        animation-direction: var(--direction);
        animation-timing-function: var(--timing-function)
    }

    #container .marquee.reduced-motion {
        @media (prefers-reduced-motion:reduce) {
            animation: none
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0%)
        }

        100% {
            transform: translateX(-100%)
        }
    }

    #container .marquee-initial-child-container {
        flex: 0 0 auto;
        display: flex;
        min-width: auto;
        flex-direction: row;
        align-items: center
    }

    #container .marquee-child {
        transform: var(--transform)
    }

    .code-behavior-wrapper>* {
        width: 100%;
        height: 100%
    }

    .bypass-link {
        position: fixed;
        top: 16px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none
    }

    .bypass-link:focus-within {
        opacity: 1;
        z-index: 1000
    }

    .bypass-link>a {
        background-color: #000;
        color: #fff;
        border: 1px solid #fff;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 12px;
        pointer-events: auto
    }
}

@layer figutils {
    .textContents ul>li:before {
        content: '\2022';
        margin-left: -1.5em;
        display: inline-block;
        text-align: center;
        width: 1.5em;
        -webkit-background-clip: var(--list-marker-background-clip);
        -webkit-text-fill-color: var(--list-marker-text-fill-color);
        background-clip: var(--list-marker-background-clip);
        background-image: var(--list-marker-background-image);
        color: var(--list-marker-color);
        font-size: var(--list-marker-font-size);
        line-height: var(--list-marker-line-height);
        mix-blend-mode: var(--list-marker-mix-blend-mode);
        vertical-align: var(--list-marker-vertical-align)
    }

    .textContents ol>li::marker {
        color: var(--list-marker-color);
        font-size: var(--list-marker-font-size);
        line-height: var(--list-marker-line-height);
        vertical-align: var(--list-marker-vertical-align)
    }

    .textContents .adjustLetterSpacing:after {
        content: '';
        margin-left: calc(var(--letter-spacing) * -1)
    }
}