#pagination{
    background-color: transparent!important;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em max(.618em,(100vw - var(--width) - 7.236em)/2);
    position: sticky;
    top: calc(100dvh - 4.618em - env(safe-area-inset-bottom, 1em));
    z-index: 9999;
    height: fit-content;
}

#pagination::after{
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color: rgba(255,255,255,.13);
    backdrop-filter: blur(8px)brightness(1.1)saturate(1)contrast(1);
    -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)100%);
    mask-image: linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)100%);
}

#pagination+*{margin-top: -4.618em}

#pagination :is(.button,button){
    position: relative;
    z-index: 2;
    width: fit-content;
    border-color:#333;
    border: 1px solid #333;
    color: #333;
    background-color: #fff;
    line-height: 2.618;
    box-shadow:0 0 1ch rgba(0,0,0,.05),0 0 2ch rgba(0,0,0,.05),0 0 3ch rgba(0,0,0,.05);
    display: flex;
    align-items: center;
    transition: opacity .13 linear
}

#pagination .button{
    width: 2.618em;
    height: 2.618em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    padding-inline: 0!important;
    position: relative;
}

body:has(#eop.visible) #pagination .next.button{
    color: #06f;
    border-color: #06f;
    background-color: rgba(255,255,255,1);
}

body:has(#eop.visible) #pagination .next.button::before{
    content:'Continue Reading';
    display: block;
    position: absolute;
    top: .75em;
    right: calc(2.618em + 1ch);
    padding-right: 1ch;
    font-family: merriweather;
    font-size: var(--small);
    font-style: italic;
    line-height: 1;
}

#pagination span.button{opacity: 0}

.arrow{
    width: 1.618em;
    margin-inline: auto
}

hr{
    width: var(--width);
    margin-inline:auto
}

#toc-btn,#toc{display: none}
.button svg.arrow{fill: #333}
body:has(#eop.visible) .button.next svg.arrow{fill: #06f}

@supports selector(*:popover-open) {
    html:has(:popover-open){overflow: clip}
    
    #toc-btn{
        display: block;
        padding-inline: 1ch;
        border-radius: .382em;
        position: relative;
        font-size: var(--small)
    }
    
    #pagination button#toc-close{
        line-height: 1.618!important;
        position: absolute;
        top: 1ch;
        right: 1ch
    }
    
    #pagination:has(:popover-open)>:is(.button,button){opacity: 0}

    #toc[popover]{
        /*width: fit-content;*/
        margin: auto;
        padding: 1ch;
        z-index:0;
        border: 1px solid #333;
        background-color: #fff;
        transition:all .34s linear;
    }

    #toc[popover]:popover-open {
        display: block;
        width: calc(var(--width) + 2ch);
        max-height: calc(100vh - 4.236em);
        overflow-y:auto;
        opacity: 1;
        transform: translateY(0);
        top: auto;
        bottom: 4.236em;
        margin: 0 auto;
        box-shadow:0 0 1ch rgba(0,0,0,.08),0 0 2ch rgba(0,0,0,.08),0 0 3ch rgba(0,0,0,.08),0 0 4ch rgba(0,0,0,.08);
        @starting-style{
            opacity: 0;
            transform: translateY(50vh);
        }
    }

    #toc[popover]::backdrop{
        -webkit-backdrop-filter: blur(5px)saturate(0)contrast(.5);
        backdrop-filter: blur(5px)saturate(0)contrast(.5);
        transition: opacity .55s linear;
        @starting-style{opacity: 0}
    }

    #pagination [popover] .card div{padding: 1ch}
    #pagination [popover] img{aspect-ratio: 1.777/1}

    #pagination [popover] .small{
        font-family: 'roboto flex';
        font-stretch: 34%;
        font-weight: 610!important;
        line-height: 1.382
    }

    #toc>ul{
        display: flex;
        flex-wrap: wrap;
        gap:1ch;
    }

    #toc>ul>li{flex: 1 1 40%}
}