:root {
    --side-width: 200px;
    --side-gap: 2em;
    --side-margin: calc(0px - var(--side-width) - var(--side-gap))
}

body,
blockquote,
.side {
    background: #ffffff;
}

.body,
.body~.appendix,
.frontmatter,
.fullwidth,
.embed-left,
.embed-right {
    background: #fff;
    margin-top: 2em;
    padding: 1em;
    box-shadow: 0 0 8px #ccc
}

.appendix,
.footnotes,
.body .side {
    font-size: .9em
}

.body~.appendix,
.frontmatter {
    background: 0 0
}

.appendix h2 {
    border-bottom: 1px dashed #666
}

#TOC {
    top: 0;

    & ul {
        list-style-position: inside
    }

    &>ul {
        margin: 0;
        padding: 0
    }

    & li>ul {
        padding-left: 1em
    }

    & .numbered {
        list-style: none
    }

    & a {
        text-decoration: none
    }

    & ul ul {
        border-left: 1px solid #b0c4de
    }
}

.bg-number {
    color: #fff;
    background: #789;
    border-radius: 5px;
    padding: 1px 5px
}

.side {
    width: var(--side-width);
    margin: 0 auto
}

.side-left {
    float: left;
    clear: left;
    margin-left: var(--side-margin);
    position: sticky
}

.side-right {
    float: right;
    clear: right;
    margin-right: var(--side-margin)
}

.quote-left,
.quote-right {
    width: 45%
}

.embed-left,
.embed-right {
    margin-top: auto;
    padding: 0
}

.quote-left,
.embed-left {
    float: left;
    margin-right: 1em
}

.quote-right,
.embed-right {
    float: right;
    margin-left: 1em
}

.embed-left {
    margin-left: var(--side-margin)
}

.embed-right {
    margin-right: var(--side-margin)
}

:is(.side, .embed-left, .embed-right)>:first-child {
    margin-top: 0
}

:is(.embed-left, .embed-right)>:last-child {
    margin-bottom: 0
}

:is(.quote-left, .quote-right) {
    &>:first-child {
        margin-top: 0;
        padding-top: .1px
    }

    &>:last-child {
        margin-bottom: 0;
        padding-bottom: .1px
    }
}

.fullwidth {
    float: left;
    background: #fff;
    min-width: 100%;
    max-width: calc(100vw - 2em);
    margin: 1em 0 1em 50%;
    transform: translate(-50%);

    & * {
        max-width: calc(100vw - 4em);
        margin: auto 0
    }

    & :is(figcaption, .caption) {
        width: 800px;
        margin-left: calc(50% - 400px);
        padding: 1em 1em 0
    }
}

.fullscroll {
    & * {
        max-width: initial
    }

    &,
    & figure,
    & .figure {
        overflow-x: auto
    }
}

@media (width>=1264.02px) {
    #TOC.side {
        & .active {
            color: orange
        }

        & li li .active {
            border-left: 3px solid;
            margin-left: calc(-1em - 3px);
            padding-left: 1em
        }

        &:has(.active) li:not(:has(.active)) ul {
            display: none
        }
    }

    .note-ref {
        cursor: pointer
    }

    .note-ref:hover+.side {
        z-index: 1;
        box-sizing: content-box;
        background-color: #f8f8f8;
        margin-left: 1em;
        padding: .5em;
        display: inline-block;
        position: absolute
    }
}

@media (width<=1264px) {
    body:not(.pagesjs) {
        & #TOC {
            position: initial;
            float: none;
            columns: 2;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 1em
        }

        & .side {
            width: 100%
        }

        & :is(main, .body) .side {
            color: #2f4f4f;
            padding: 0 2em
        }

        & .side-left,
        & .side-right {
            clear: both;
            background: 0 0;
            margin: 1em auto
        }

        & :not(.note-ref)+.side {
            float: none
        }

        & .footnote-ref+.footnotes {
            float: left
        }

        & .side>:last-child {
            margin-bottom: 0
        }

        & .embed-left,
        & .embed-right {
            float: inherit;
            margin: auto;
            padding: 1em
        }
    }
}

@media (width<=800px) {
    body:not(.pagesjs) {
        padding: initial;

        & main,
        & .body {
            padding: 0 .5em
        }

        & #TOC {
            columns: 1
        }

        & .quote-left,
        & .quote-right {
            width: inherit;
            float: inherit;
            margin: auto
        }

        & .fullwidth {
            margin: initial;
            transform: initial;
            float: none;
            min-width: initial;
            background: 0 0;
            border: none;

            & :is(figcaption, .caption) {
                margin: initial;
                padding: initial
            }

            &:not(.fullscroll) * {
                max-width: 100%
            }
        }
    }
}

@media print {
    body {
        background: 0 0
    }
}

/*# sourceMappingURL=article.min.css.map */