.sidebar {
        z-index: 4;
        /* background-image: url(ae13c45aee48bcdb0e6dd36037d9fac3.jpg); */
        background-size: cover;
        background-position: center;
        /* border-left: solid 4px hsl(from var(--c-100) h s calc(l + 30) / .5);
        border-right: solid 4px hsl(from var(--c-100) h s calc(l + 30) / .5); */

        position: relative;
        display: grid;
        grid-template-rows: 1fr minmax(15dvh, 40dvh) 2fr;
        grid-template-rows: max-content 1fr max-content;
        /* grid-template-rows: max-content max-content 1fr max-content; */


        /* grid-template-rows: max-content minmax(auto, 40dvh) max-content; */
        /* grid-template-rows: 20dvh 40dvh 40dvh; */
        max-height: 100dvh;
        margin-right: -2rem;
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
        --edge-size: 0.8rem;
        --tan: tan(22.5);

        .top,
        .middle,
        .bottom {
            text-shadow: 0 0 15px hsl(from var(--ca-10) h s l / 0.4);
            position: relative;
        }


        /* .middle{
            max-height: 50dvh;
        } */


        /* cut corners: https://www.youtube.com/watch?v=aW6qEAQSctY */
        .top {
            color: var(--c-100);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, var(--edge-size) 100%, 0 calc(100% - var(--edge-size)));
            background: linear-gradient(-45deg, var(--c-30), hsl(from var(--c-30) h s calc(l * 1.2)), var(--c-30));
            margin: 0 1rem;

            .inner {
                position: relative;
                height: 100%;
                padding: 0 1.3em 1.3em 1.3em;

                /* display: grid;
                grid-template-columns: minmax(3em, auto) 1fr;
                grid-auto-flow: row;
                grid-auto-rows: auto;
                align-items: center; */

                /* place-items: center;
                display: grid;
                grid-template-rows: repeat(2, auto); */
                display: flex;
                flex-direction: column;
                justify-content: start;

                .year-nav {
                    display: grid;
                    grid-template-columns: 1em auto 1em;
                    /* align-items: center; */
                    font-size: 2.5em;
                    width: 100%;
                    /* padding: 0 2em;
                    clip-path: polygon(0.7em 0, 2.5em 100%, calc(100% - 2.5em) 100%, calc(100% - 0.7em) 0); */
                    background: linear-gradient(to bottom, var(--ca-40), var(--ca-50) 50%, var(--ca-90) 50%, var(--ca-80));
                    background: linear-gradient(to bottom, var(--ca-20), var(--ca-30) 50%, var(--ca-50) 50%, var(--ca-40));

                    background: linear-gradient(to bottom, var(--c-30), var(--c-40) 50%, var(--c-50) 50%, var(--c-30));
                    /* background: linear-gradient(to bottom, var(--ca-a1-light), var(--ca-a1) 50%, var(--ca-a1-dark) 50%, var(--ca-a1)); */
                    /* background-size: 100% 100%;
                    background-position: 0px 0px;
                    background-image: radial-gradient(35% 75% at 50% 100%, var(--c-20) 0%, transparent 100%); */
                    --edge-size: 0.2em;
                    --tan: tan(22.5);
                    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, var(--edge-size) 100%, 0 calc(100% - var(--edge-size)));
                    width: fit-content;
                    align-self: center;

                    --color: var(--c-100);
                    --icon-color: var(--c-100);
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        inset: 0;
                        margin: inherit;
                        background-size: 100% 100%;
                        background-position: 0px 0px;
                        pointer-events: none;
                        z-index: -1;
                        background-image: radial-gradient(35% 75% at 50% 100%, var(--c-20) 0%, transparent 100%);
                        background: linear-gradient(to bottom, var(--c-10), var(--c-20) 50%, var(--c-30) 50%, var(--c-10));
                        clip-path: polygon(calc(var(--edge-size) * var(--tan)) 0, calc(100% - var(--edge-size) * var(--tan)) 0, calc(100% - var(--edge-size) * var(--tan)) calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) calc(100% - var(--edge-size) * var(--tan)), var(--edge-size) calc(100% - var(--edge-size) * var(--tan)), calc(var(--edge-size) * var(--tan)) calc(100% - var(--edge-size)));
                    }


                    p {
                        /* justify-self: center; */
                        text-align: center;
                        font-family: var(--font-d2);
                        font-weight: bold;
                        grid-column: 2;
                        color: var(--color);
                        /* background: linear-gradient(to bottom, var(--ca-40), var(--ca-50) 50%, var(--ca-90) 50%, var(--ca-80)); */
                        padding: 0.1em;
                        --border: 2px solid hsl(from var(--ca-110) h s l / 0.3);
                        text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2);
                        /* border-left: var(--border);
                        border-right: var(--border);
                        border-bottom: var(--border); */
                    }

                    a {
                        /* background: linear-gradient(to bottom, var(--ca-40), var(--ca-50) 50%, var(--ca-90) 50%, var(--ca-80)); */
                        display: flex;
                        place-content: center;
                        place-items: center;

                        /* --border: 2px solid hsl(from var(--ca-110) h s l / 0.3); */
                        /* border-bottom: var(--border); */
                        transition: all 0.3s;
                        position: relative;

                        &:hover,
                        &:focus-visible {
                            --icon-color: var(--ca-a1);
                            filter: drop-shadow(0 0 5px var(--ca-a1));
                            outline: none;

                            &::after {
                                opacity: 0.3;
                            }
                        }

                        &::after {
                            position: absolute;
                            content: '';
                            inset: 30% 10%;
                            background-color: var(--ca-a1-light);
                            filter: blur(10px);
                            mix-blend-mode: color-dodge;
                            opacity: 0;

                        }

                        .prev {
                            grid-column: 1;
                            border-left: var(--border);
                        }

                        .next {
                            grid-column: 3;
                            border-right: var(--border);
                        }
                    }
                }

                .toggles {
                    display: grid;
                    /* padding: 1.3em 1.3em 0 1.3em; */
                    padding-top: 0.5em;
                    align-self: center;
                    grid-template-columns: minmax(3em, auto) 1fr;
                    grid-auto-flow: row;
                    grid-auto-rows: auto;
                    align-items: center;
                }

                &::before {
                    content: '';
                    background: linear-gradient(-45deg, var(--c-10), hsl(from var(--c-10) h s calc(l * 1.5)), var(--c-10));
                    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, var(--edge-size) 100%, 0 calc(100% - var(--edge-size)));
                    position: absolute;
                    inset: 0 0.3em 0.3em 0.3em;
                    clip-path: polygon(calc(var(--edge-size) * var(--tan)) 0, calc(100% - var(--edge-size) * var(--tan)) 0, calc(100% - var(--edge-size) * var(--tan)) calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) calc(100% - var(--edge-size) * var(--tan)), var(--edge-size) calc(100% - var(--edge-size) * var(--tan)), calc(var(--edge-size) * var(--tan)) calc(100% - var(--edge-size)));
                    inset: 0;
                    z-index: -1;
                    margin: inherit;
                }
            }
        }

        .middle {
            anchor-name: --middle;
            background: linear-gradient(var(--ca-100) 20%, var(--ca-110));
            border-image: linear-gradient(to bottom, var(--ca-a1) 30%, var(--ca-a2) 70%) 30;
            border-left: 5px solid;
            border-right: 5px solid;
            /* padding: 2em 1em;
            margin: -2em 1em; */
            width: 90%;
            /* width: calc(100% - 3.5rem); */
            justify-self: center;
            z-index: -1;
            padding: 3em 1em;
            padding: 1rem;
            overflow: auto;
            text-align: center;
            color: var(--ca-10);
            /* scrollbar-gutter: stable; */
            scrollbar-width: thin;
            isolation: isolate;
            position: relative;



            .tab {
                position: relative;

                ul li {
                    position: relative;
                }

            }

            input {
                position: absolute;
                inset: 0;
                display: block;
                opacity: 0;
                /* opacity: 0.5; */
                cursor: pointer;
            }

            .menu-label {
                font-family: var(--font-d2);
                font-weight: bold;
                font-size: 1.3em;
                position: relative;
                border-radius: 0.3em;
                border: 3px solid var(--ca-a1);
                padding: 0.5em;
                display: block;
                margin-bottom: 1em;
                isolation: isolate;
                transition: all 0.3s;



                &:has(input:hover),
                &:has(input:focus-visible) {
                    box-shadow: inset 0 0 10px var(--ca-a1), 0 0 10px var(--ca-a1);
                    text-shadow: 0 0 10px var(--ca-40);
                }


                &:has(input:checked) {
                    border-radius: 0.3em 0.3em 0 0;
                    margin-bottom: 0em;

                    +.menu-options {
                        border: 2px solid var(--ca-a2);
                        height: fit-content;
                        padding: 1em;
                        margin-bottom: 1em;
                        border-radius: 0 0 0.3em 0.3em;
                        display: block;
                        visibility: visible;
                    }

                    &.upd+.menu-options {
                        border: 2px solid var(--ca-60);
                    }
                }

                &.upd {
                    border: 3px solid var(--ca-50);
                    color: var(--ca-40);


                    &:has(input:hover),
                    &:has(input:focus-visible) {
                        box-shadow: inset 0 0 10px var(--ca-70), 0 0 10px var(--ca-70);
                        text-shadow: 0 0 10px var(--ca-40);
                    }

                    /* ul {
                        display: flex;
                        flex-direction: column;
                        place-content: center;
                    } */

                    /* button[popovertarget]{
                        padding: 0.5rem;
                        border-radius: 0;
                        background: hsl(from var(--ca-50) h s l / 0.3);
                    } */
                    li:has(button[popovertarget]):not(p) {
                        list-style-position: outside;

                    }

                }
            }

            .menu-options {
                visibility: hidden;
                height: 0;
                overflow: hidden;
                color: var(--ca-30);

                text-align: start;
                /* display: none; */

                a {
                    text-decoration: none;
                    color: var(--ca-40);
                    transition: text-shadow 0.3s;
                    scroll-margin-top: 2rem;

                    &:hover,
                    &:focus-visible {
                        text-shadow: 0 0 15px var(--ca-a2);
                        color: var(--ca-a2);
                        outline: none;
                    }

                    &:active,
                    &:target {
                        color: var(--ca-a2-light);

                    }
                }

                label {

                    margin: 0.2em;
                    gap: 0.5em;

                }

                time {
                    font-weight: bold;
                    font-family: var(--font-d2);
                    font-size: 1.3rem;
                }

                ul {
                    li {

                        list-style: square;
                        list-style-position: inside;



                        &:has(button[popovertarget]) {
                            list-style: none;
                            list-style-position: outside;
                            margin: 0.5rem 0;

                            &:has(.icon) {
                                display: flex;
                                /* display: grid;
                                grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); */
                                flex-direction: row;
                                align-items: center;
                                --icon-color: var(--ca-10);

                                .icon {
                                    background: hsl(from var(--ca-10) h s l / 0.3);
                                    padding: 0.4rem;
                                    border: 2px solid #ffffff31;
                                    --icon-size: calc(2rem + 4px);
                                }
                            }

                            button {
                                margin: 0;
                                outline: 0;
                                border: 2px solid #ffffff31;
                                line-height: 1;
                            }
                        }
                    }
                }
            }


        }

        .panel-shine,
        .edge-glow {
            z-index: 2;
            /* grid-row: 3 / 4; */
            content: '';
            position: fixed;
            pointer-events: none;
            position-anchor: --middle;
            /* position-area: center; */
            /* inset: anchor(--middle); */
            inset: 0;
            inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
        }

        .panel-shine {
            /* inset: 0 1em; */
            clip-path: polygon(20% 0, 100% 0, 100% 100%, 85% 100%);
            background: linear-gradient(rgba(255, 255, 255, 0.144) 5%, transparent);
        }

        .edge-glow {
            /* inset: 0; */
            border-image: linear-gradient(to bottom, var(--ca-a1) 30%, var(--ca-a2) 70%) 30;
            border-left: 5px solid;
            border-right: 5px solid;
            filter: blur(10px);

        }

        .bottom {
            background: linear-gradient(-45deg, var(--ca-70), hsl(from var(--ca-70) h s calc(l * 1.3)), var(--ca-70));
            clip-path: polygon(var(--edge-size) 0, calc(100% - var(--edge-size)) 0, 100% var(--edge-size), 100% 100%, 0 100%, 0 var(--edge-size));
            color: var(--ca-10);
            font-family: var(--font-d1);

            >.inner {
                position: relative;
                height: 100%;
                padding: 1.3em;
                padding: 1.3em 1.3em 0.5em 1.3em;
                padding: 1em 1em 0.5em 1em;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                    grid-column: 1 / -1;
                    text-align: center;
                    font-size: 1.5em;
                    margin-bottom: 0.3em;

                    font-weight: bold;
                }

                .thumbnail-style {
                    display: grid;
                    grid-template-columns: 1fr auto 1fr;
                    grid-auto-flow: row;
                    grid-auto-rows: auto;
                    place-items: center;
                    font-weight: bold;
                    text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2);



                    .knob {
                        left: 70%;
                        clip-path: polygon(0 100%, 0 0, 100% 100%);
                        transform: translate(-50%, -50%) rotate(225deg);
                        transition: inset 0.3s, transform 0.3s;
                    }

                    .base {
                        height: 0.5em;
                    }

                    .p-highlight {
                        transition: all 0.3s;
                    }


                    .arrows {
                        position: relative;

                        .arrow {
                            position: absolute;
                            inset: 0;
                            background: linear-gradient(var(--ca-90), var(--ca-100));
                            height: 1.5em;
                            width: 1.5em;
                            /* position: relative; */
                            isolation: isolate;
                            top: 50%;


                            .inner {
                                position: absolute;
                                inset: 20%;
                                clip-path: inherit;
                                background: linear-gradient(var(--ca-a1), var(--ca-a1-dark));
                            }

                            &.left {
                                transform: translate(-50%, -50%) rotate(45deg);
                                clip-path: polygon(0 100%, 0 0, 100% 100%);
                                left: 60%;
                            }

                            &.right {
                                transform: translate(-50%, -50%) rotate(45deg);
                                clip-path: polygon(0 0, 100% 0, 100% 100%);
                                left: 70%;
                            }
                        }
                    }

                    /* &:has(#thumbnail-toggle:focus-visible),&:has(#thumbnail-toggle:hover) { */
                    &:has(#thumbnail-toggle:focus-visible) {
                        .p-highlight {
                            text-shadow: 0 0 15px var(--ca-a2), 0 0 5px var(--ca-a1);
                        }

                    }

                    &:has(#thumbnail-toggle:checked) {
                        .base {
                            background: linear-gradient(var(--ca-50));
                            border: solid 2px var(--ca-60);


                            &::after {
                                opacity: 0;
                                inset: -30% -10% -30% -10%;
                                inset: 0;
                            }

                            &::before {
                                inset: 0 100% 0 0;
                            }
                        }

                        .knob {
                            left: 30%;
                            transform: translate(-50%, -50%) rotate(45deg);
                        }


                    }


                }

                &::before {
                    content: '';
                    position: absolute;
                    background: linear-gradient(-45deg, var(--ca-80), hsl(from var(--ca-80) h s calc(l * 1.3)), var(--ca-80));
                    inset: 0.3em 0.3em 0 0.3em;
                    clip-path: polygon(var(--edge-size) 0, calc(100% - var(--edge-size)) 0, 100% var(--edge-size), 100% 100%, 0 100%, 0 var(--edge-size));
                    inset: 0;
                    clip-path: polygon(var(--edge-size) calc(var(--edge-size) * var(--tan)), calc(100% - var(--edge-size)) calc(var(--edge-size) * var(--tan)), calc(100% - var(--edge-size) * var(--tan)) calc(var(--edge-size)), calc(100% - var(--edge-size) * var(--tan)) 100%, calc(var(--edge-size) * var(--tan)) 100%, calc(var(--edge-size) * var(--tan)) var(--edge-size));
                    clip-path: polygon(var(--edge-size) calc(var(--edge-size) * var(--tan)), calc(100% - var(--edge-size)) calc(var(--edge-size) * var(--tan)), calc(100% - var(--edge-size) * var(--tan)) calc(var(--edge-size)), calc(100% - var(--edge-size) * var(--tan)) 100%, calc(var(--edge-size) * var(--tan)) 100%, calc(var(--edge-size) * var(--tan)) var(--edge-size));
                    z-index: -1;
                }

                input {
                    display: block;
                    position: absolute;
                    inset: 0;
                    opacity: 0.3;
                    opacity: 0;
                    cursor: pointer;
                }

                .rendering-state {
                    /* margin-top: 1em; */

                    >div {
                        display: grid;
                        grid-template-columns: 2em 1fr;
                        grid-auto-flow: row;
                        grid-auto-rows: auto;
                        margin: auto;
                        width: fit-content;

                        .vert-slider {
                            grid-row: 2 / 5;
                            width: 0.6em;
                            justify-self: center;
                            align-self: center;

                            position: relative;
                            /* height: 90%;
                        height: calc(100% - 1em); */
                            height: 100%;

                            &::before {
                                content: '';
                                position: absolute;
                                inset: 1.5em 0;
                                inset: 1em 0;
                                /* inset: 0%; */
                                background: var(--c-40);
                                border: solid 2px var(--c-30);
                                border-radius: 1em;
                                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.3);
                            }

                            .knob {
                                width: 1.5em;
                                height: 1.5em;
                                background: linear-gradient(-45deg, var(--c-100), var(--c-80));
                                position: absolute;
                                /* top: 50%;
                            left: -50%; */
                                inset: 50% auto auto -50%;
                                clip-path: polygon(0 100%, 0 0, 100% 100%);
                                /* transform: translate(-50%, -50%) rotate(225deg);
                            transform: translate(-50%, calc(100% + 0.5em)) rotate(225deg); */
                                transition: inset 0.3s, transform 0.3s;

                                &::before {
                                    content: '';
                                    position: absolute;
                                    inset: 10%;
                                    background: linear-gradient(-45deg, transparent, hsl(from var(--c-10) h s l / 0.2), transparent), linear-gradient(180deg, transparent, hsl(from var(--c-100) h s l / 1), transparent);
                                    z-index: 3;
                                }
                            }

                        }

                        &:has(#polished:checked) .knob {
                            transform: translate(-40%, calc(100% - 0.5em)) rotate(225deg);
                            inset: calc(-10%) auto auto -50%;
                            /* inset: calc(0%) auto auto -50%; */

                        }

                        &:has(#sketch:checked) .knob {
                            transform: translate(-40%, 50%) rotate(225deg);
                            inset: calc(100% / 3 - 0.5em) auto auto -50%;
                            /* inset: calc(100% / 3 + 0.2em) auto auto -50%; */
                        }

                        &:has(#all:checked) .knob {
                            transform: translate(-40%, calc(100% + 0.5em)) rotate(225deg);
                            inset: calc(100% / 3 + 0.5em) auto auto -50%;
                            /* inset: calc(100% / 3 + 2.0em) auto auto -50%; */
                        }


                        /* >:not(.vert-slider, .title, .knob) { */
                        >:not(.vert-slider, .title, .knob) {
                            grid-column: 2;
                            padding: 0.5em;
                            /* padding:0 0.5em; */
                            position: relative;
                            cursor: pointer;
                            width: fit-content;
                            transition: text-shadow 0.3s;

                            &:hover,
                            &:focus-visible {
                                text-shadow: 0 0 15px var(--ca-a2), 0 0 5px var(--ca-a1);
                            }
                        }

                        .skt {
                            padding: 0.5em;
                        }

                        .skt,
                        .all,
                        .pol {
                            padding: 1em;
                            padding: 0.5em;
                            align-self: start;
                        }
                    }
                }

                .thumb-sizes {
                    .sizes {
                        display: flex;
                        place-items: center;
                        place-content: center;

                        label {
                            position: relative;
                            padding: 0 0.5em;
                            font-size: 1.2em;
                            font-weight: bold;
                            background: linear-gradient(to bottom, var(--ca-70), var(--ca-80) 50%, var(--ca-90) 50%, var(--ca-100));
                            border: 1px solid var(--ca-90);
                            transition: all 0.3s;
                            text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2);
                            color: var(--ca-40);

                            input {
                                display: unset;
                                position: absolute;
                                inset: 0;
                                /* opacity: 0.5; */
                            }

                            &:has(input:checked) {
                                background: linear-gradient(to bottom, var(--ca-a1-light), var(--ca-a1) 50%, var(--ca-a1-dark) 50%, var(--ca-a1));
                                border: 1px solid var(--ca-a1-dark);
                                color: var(--ca-10);
                            }

                            &:hover,
                            &:focus-within {
                                filter: brightness(1.5);
                                border: 1px solid var(--ca-a2-dark);
                            }
                        }

                        /* actual size checks done in main */
                    }
                }
            }
        }

        .toggle {
            padding: 1em;
            position: relative;

            .base {
                width: 3em;
                height: 1em;
                /* background: linear-gradient(90deg, var(--ca-a1), var(--ca-a2)); */
                background: var(--c-50);
                border: solid 2px var(--ca-60);
                border-radius: 1em;
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
                position: relative;
                display: flex;
                justify-content: end;

                &::after {
                    content: '';
                    position: absolute;
                    inset: -30% -10%;
                    background: linear-gradient(90deg, var(--ca-a1), var(--ca-a2));
                    /* scale: 1.5; */
                    filter: blur(10px);
                    transition: opacity 0.4s, inset 0.3s;
                }

                &::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(90deg, var(--ca-a1), var(--ca-a2));
                    border-radius: inherit;
                    transition: inset 0.3s;
                }

            }

            .knob {
                width: 1.5em;
                height: 1.5em;
                background: linear-gradient(-45deg, var(--c-100), var(--c-80));
                position: absolute;
                top: 50%;
                left: 70%;
                /* transform: translate(-50%, -50%); */
                transform-origin: center;
                z-index: 2;
                transform: translate(-50%, -50%) rotate(45deg);
                /* scale: 1.5; */
                pointer-events: none;
                box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
                isolation: isolate;
                transition: inset 0.3s;

                &::before {
                    content: '';
                    position: absolute;
                    inset: 10%;
                    background: linear-gradient(-45deg, transparent, hsl(from var(--c-10) h s l / 0.2), transparent), linear-gradient(180deg, transparent, hsl(from var(--c-100) h s l / 1), transparent);
                    z-index: 3;

                }
            }

            +.p-highlight {
                font-family: var(--font-d1);
                font-weight: bold;
                text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2);
                padding: 0.4em;
                border-radius: 0.2em;
                /* background: linear-gradient(var(--c-10), var(--c-20));
                box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.164); */

                /* border: 2px solid var(--c-30); */
                /* width: fit-content; */
            }

            input {
                display: unset;
                position: absolute;
                inset: 0;
                opacity: 0.1;
                opacity: 0;
                z-index: 5;
                cursor: pointer;
            }

            &:has(input:focus-visible) {

                /* .knob {
                    outline: solid var(--ca-a2) 2px;
                } */
                /* .base {
                    border-color: var(--ca-a1);

                } */

                +.p-highlight {
                    text-shadow: 0 0 15px var(--ca-a2), 0 0 5px var(--ca-a1);
                }
            }

            &.gore:has(#gore-content-toggle:checked) {
                .base {
                    background: linear-gradient(var(--ca-50));
                    border: solid 2px var(--ca-60);

                    &::after {
                        opacity: 0;
                        inset: -30% -10% -30% -10%;
                        inset: 0;
                    }

                    &::before {
                        inset: 0 100% 0 0;
                    }
                }

                .knob {
                    left: 30%;
                }
            }

            &.sensitive:has(#sensitive-content-toggle:not(:checked)) {
                .base {
                    background: var(--c-50);
                    border: solid 2px var(--ca-60);

                    &::after {
                        opacity: 0;
                    }

                    &::before {
                        inset: 0 100% 0 0;
                    }
                }

                .knob {
                    left: 30%;
                }
            }
        }
    }

    body {
        @media (height < 40rem) {
            main {
                height: auto;
                height: 60rem;
            }

            .sidebar {
                /* grid-template-rows: max-content max(100%, 30rem) max-content; */
                max-height: 60rem;
            }
        }
    }

    main {
        display: grid;
        grid-template-columns: 1fr 3fr;
        height: 100dvh;
        /* height: 100%; */
        width: 75dvw;
        margin: auto;


        .content,
        .gallery-container {
            padding-left: 2em;

            /* backdrop-filter: blur(15px); */
            overflow: auto;
            border-right: solid 2px hsl(from var(--c-10) h s l / 0.3);
            border-left: solid 2px hsl(from var(--c-10) h s l / 0.3);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            position: relative;
            /* display: grid;
            grid-template-columns: repeat(auto-fit, minmax(10em, 1fr) );
            grid-template-rows: minmax(10em, 1fr);
            align-items: start; */
            display: flex;
            justify-content: center;
            align-content: start;
            align-items: center;
            flex-wrap: wrap;
            grid-column: 2;
            grid-row: 1;
            z-index: 3;


        }

        .deco-bg {
            /* position: absolute;
            position: fixed;
            inset: 0; */
            grid-column: 2;
            grid-row: 1;
            z-index: -1;
            z-index: 2;
            display: grid;
            overflow: hidden;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            opacity: .3;
            mask-image: linear-gradient(-45deg, black 0%, transparent, black);
            pointer-events: none;

            /* >* {
                grid-column: 1;
                grid-row: 1;
            } */
            *,
            * * {
                z-index: -1;
            }

            .piece {
                display: grid;
                grid-column: 1;
                grid-row: 1;

                >* {
                    grid-column: 1;
                    grid-row: 1;
                }

                & .tri2 {

                    & div:nth-child(n+6):nth-child(-n+10),
                    & div:nth-child(n+16):nth-child(-n+20) {
                        transform: translate(50%, 0) rotate(180deg);
                        transform: translate(50%, 0) rotate(180deg) scale(0.9, 1);
                        background: var(--ca-40);
                        background: var(--bg-color);
                    }

                    & div:nth-child(n+1):nth-child(-n+4),
                    & div:nth-child(n+6):nth-child(-n+8),
                    & div:nth-child(n+11):nth-child(-n+12),
                    & div:nth-child(16) {
                        background: transparent;
                        /* background: blue; */
                    }

                    --red:8s;
                    --pink:5s;
                    --yellow:12s;
                    --green:3s;
                    --blue:7s;
                    --purple:2s;

                    /* red */
                    & div:nth-child(14),
                    & div:nth-child(19),
                    & div:nth-child(22) {
                        background-color: hsl(from var(--bg-color) h s calc(l*0.9));
                        animation: pulse-red var(--red) infinite;
                    }

                    /* pink */
                    & div:nth-child(10),
                    & div:nth-child(18),
                    & div:nth-child(20) {
                        background-color: hsl(from var(--bg-color) h s calc(l*0.9));
                        animation: pulse-red var(--red) var(--pink) infinite;

                    }

                    /* yellow */
                    & div:nth-child(9),
                    & div:nth-child(16) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-yellow var(--yellow) infinite;
                    }

                    /* green */
                    & div:nth-child(5),
                    & div:nth-child(15),
                    & div:nth-child(17),
                    & div:nth-child(24) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-yellow var(--yellow) var(--green) infinite;
                    }

                    /* blue */
                    & div:nth-child(13),
                    & div:nth-child(21),
                    & div:nth-child(25) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-blue var(--blue) infinite;
                    }

                    /* purple */
                    & div:nth-child(23) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-blue var(--blue) var(--purple) infinite;
                    }
                }

                .tri1 {

                    & div:nth-child(n+6):nth-child(-n+10),
                    & div:nth-child(n+16):nth-child(-n+20) {
                        transform: rotate(180deg);
                        transform: rotate(180deg) scale(0.9, 1);
                        background: var(--ca-70);
                        background: var(--bg-color);
                    }

                    & div:nth-child(n+1):nth-child(-n+4),
                    & div:nth-child(n+6):nth-child(-n+9),
                    & div:nth-child(n+11):nth-child(-n+12),
                    & div:nth-child(16) {
                        background: transparent !important;

                    }

                    --red:7s;
                    --pink:3s;
                    --yellow:6s;
                    --green:5s;
                    --blue:8s;
                    --purple:9s;

                    /* red */
                    & div:nth-child(13),
                    & div:nth-child(21),
                    & div:nth-child(5) {
                        background-color: hsl(from var(--bg-color) h s calc(l*0.9));
                        animation: pulse-red var(--red) infinite;
                    }

                    /* pink */
                    & div:nth-child(22) {
                        background-color: hsl(from var(--bg-color) h s calc(l*0.9));
                        animation: pulse-red var(--red) var(--pink) infinite;

                    }

                    /* yellow */
                    & div:nth-child(18),
                    & div:nth-child(20),
                    & div:nth-child(24) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-yellow var(--yellow) infinite;
                    }

                    /* green */
                    & div:nth-child(14) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-yellow var(--yellow) var(--green) infinite;
                    }

                    /* blue */
                    & div:nth-child(10),
                    & div:nth-child(23) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-blue var(--blue) infinite;
                    }

                    /* purple */
                    & div:nth-child(15),
                    & div:nth-child(17),
                    & div:nth-child(19),
                    & div:nth-child(25) {
                        background-color: hsl(from var(--bg-color) h s calc(l*1.1));
                        animation: pulse-blue var(--blue) var(--purple) infinite;
                    }
                }

                &:nth-child(1) {
                    grid-column: 1 / 3;
                    grid-row: 1;
                    transform: scaleX(-1) scaleY(-1);


                }

                &:nth-child(2) {
                    grid-column: 2 / 4;
                    grid-row: 2;


                }
            }


            .tri1,
            .tri2 {
                width: 100%;
                height: 100%;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(5, 1fr);
                /* transform: translate(-5%, 0%); */
                --bg-color: var(--c-40);

                & div {
                    /* margin: 5px; */
                    /* margin-bottom: -1px; */
                    transform: scale(0.9);

                }

            }

            .tri1 {

                /* transform: translate(10%, 0%); */
                /* display: grid;
                grid-template-columns: subgrid;
                grid-template-rows: subgrid; */
                div {
                    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                    background: var(--ca-80);
                    background: var(--bg-color);

                }


            }

            .tri2 {

                /* transform: translate(0%, 0%) rotate(180deg); */
                div {
                    /* transform: translate(-10%, 0%); */
                    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                    clip-path: polygon(0 0, 100% 0, 50% 100%);
                    background: var(--ca-50);
                    background: var(--bg-color);
                    transform: translate(50%, 0%);
                    transform: translate(50%, 0%) scale(0.9);
                }


            }
        }

        .default-transparent-sides {
            grid-column: 2;
            grid-row: 1;
            z-index: 1;
            position: relative;
        }

    }

    .sidebar-button {
        display: none;
        position: fixed;
        inset: 0 0 auto auto;
        background-color: var(--ca-10);
        --icon-color: var(--ca-100);
        --icon-size: 2em;

        padding: 0.5em;
        z-index: 11;
        width: fit-content;
        isolation: isolate;
        border: 2px solid var(--ca-30);
        border-bottom-left-radius: 0.5em;
        transition: box-shadow 0.3s, border 0.1s, background-color 0.1s;

        &:hover,
        &:focus-visible {
            box-shadow: 0 0 10px var(--ca-a1);
        }

        &:active {
            background-color: var(--ca-50);
            border: 2px solid var(--ca-70);
        }

        input {
            position: absolute;
            inset: 0;
            z-index: 12;
            cursor: pointer;
            display: unset;
            opacity: 0;
        }

        & svg {
            height: var(--icon-size);
            width: var(--icon-size);
        }
    }

    @keyframes pulse-red {
        0% {
            opacity: 1;
        }

        20% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }

    }

    @keyframes pulse-yellow {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.4;
        }

        100% {
            opacity: 1;
        }

    }

    @keyframes pulse-blue {
        0% {
            opacity: 1;
        }

        70% {
            opacity: 0.3;
        }

        100% {
            opacity: 1;
        }

    }

    @media (orientation: portrait) {
        main {
            grid-template-columns: 1fr;
            margin-top: var(--mobile-nav-height);
            width: 90dvw;

            >* {
                grid-column: 1 !important;
                grid-row: 1 !important;
            }



            .sidebar {
                transition: all 0.3s;
                transform: translateX(-150%);
                visibility: hidden;
                grid-column: 1;
            }
        }

        .sidebar-button {
            display: block;
        }

        &:has(#sidebar-button:checked) .sidebar {
            transform: translateX(0%);
            visibility: visible;
            margin-right: 0rem;
        }
    }

    .filter-toggles-panel {

        /* margin: 0 -1rem; */
        padding: 1rem 0rem;
        background: linear-gradient(-45deg, var(--c-70), hsl(from var(--c-70) h s calc(l * 1.5)), var(--c-70));
        background: linear-gradient(-45deg, var(--c-40), hsl(from var(--c-50) h s calc(l * 1.5)), var(--c-40));
        font-family: var(--font-d1);
        font-weight: bold;
        text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2);
        display: flex;
        gap: 0.5rem;
        align-items: center;
        justify-content: space-around;
        justify-content: space-between;
        padding: 1rem var(--edge-size);
        text-align: center;
        anchor-name: --gtp;
        /* box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.427); */
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
        z-index: 6;
        position: relative;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, var(--edge-size) 100%, 0 calc(100% - var(--edge-size)));
        color: var(--c-100);
        font-size: 1.5em;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            clip-path: polygon(calc(var(--edge-size) * var(--tan)) 0, calc(100% - var(--edge-size) * var(--tan)) 0, calc(100% - var(--edge-size) * var(--tan)) calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) calc(100% - var(--edge-size) * var(--tan)), var(--edge-size) calc(100% - var(--edge-size) * var(--tan)), calc(var(--edge-size) * var(--tan)) calc(100% - var(--edge-size)));
            background: linear-gradient(-45deg, var(--c-60), hsl(from var(--c-60) h s calc(l * 1.5)), var(--c-60));
            background: linear-gradient(-45deg, var(--c-10), hsl(from var(--c-10) h s calc(l * 1.5)), var(--c-10));
            z-index: -1;
        }

        .tbw-inset {
            /* content: ''; */
            position: relative;
            --size: 2.5rem;
            padding: 0.5rem;
            width: var(--size);
            height: var(--size);
            /* inset: -0.5rem; */
            border-radius: 25%;
            border: solid 2px var(--c-40);
            /* z-index: -2; */
            background: linear-gradient(to bottom, var(--c-30), var(--c-50));

            background: var(--c-60);
        }

        .filter-toggles-button-wrapper {
            --icon-color: var(--c-100);
            /* --size: 2rem; */
            --size-svg: 1.5rem;
            position: absolute;
            inset: 0.1rem;
            /* width: var(--size);
            height: var(--size); */
            border-radius: inherit;
            z-index: 1;
            --light-color: var(--c-10);
            --middle-color: var(--c-50);
            --dark-color: var(--c-70);
            background: linear-gradient(to bottom, var(--light-color), var(--middle-color));
            box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.427);

            &::before {
                border-radius: inherit;
                content: '';
                position: absolute;
                inset: 0.5rem;
                inset: 10%;
                z-index: -1;
                /* border: 0.15rem solid; */
                /* border-image: linear-gradient(to bottom, var(--light-color), var(--dark-color)) 1; */
                background: linear-gradient(to top, var(--light-color), var(--middle-color));
                transition: all 0.5s;
                /* background:blue; */

            }



            &:has(input:hover, input:focus-visible),
            &:has(input:hover, input:focus-visible)::before {
                /* --light-color: var(--ca-a1);
                --middle-color: light-dark(hsl(from var(--ca-a1) h calc(s + 10) calc(l - 30)), hsl(from var(--ca-a1) h calc(s - 50) calc(l - 30)));
                --dark-color: light-dark(hsl(from var(--ca-a1) h calc(s + 10) calc(l - 30)), hsl(from var(--ca-a1) h calc(s - 50) calc(l - 30))); */
                filter: brightness(1.1);

                svg {
                    --icon-color: var(--ca-a2);
                }
            }

            &:has(input:active),
            &:has(input:active)::before {
                filter: brightness(0.9);
            }

            &:has(input:checked) {
                box-shadow: 0 0rem 0.5rem rgba(0, 0, 0, 0.427);
                transform: scale(0.95);
            }

            &:has(input:checked),
            &:has(input:checked)::before {
                /* --icon-color: var(--c-10); */
                /* --light-color: var(--ca-a1-dark);
                --middle-color: light-dark(hsl(from var(--ca-a1-dark) h calc(s + 50) calc(l - 20)), hsl(from var(--ca-a1-dark) h calc(s) calc(l - 20)));
                --dark-color: light-dark(hsl(from var(--ca-a1-dark) h calc(s + 50) calc(l - 20)), hsl(from var(--ca-a1-dark) h calc(s) calc(l - 20))); */
                --light-color: var(--ca-50);
                --middle-color: var(--ca-20);
                --dark-color: var(--ca-10);
            }


            input {
                position: absolute;
                inset: 0;
                opacity: 0.7;
                opacity: 0;
                z-index: 5;
                cursor: pointer;

            }

            svg {
                /* width: var(--size-svg);
                height: var(--size-svg); */
                position: absolute;
                inset: 10.5%;
                filter: drop-shadow(0 0 0.2rem var(--icon-color));
                /* mask-image: linear-gradient(to bottom, black, white); */
            }
        }

        &:has(#filter-toggles-button:checked)~#filter-toggles-menu {
            display: grid;
            transform: translateY(0%);
            top: 0;
            height: auto;
        }
    }

    #filter-toggles-menu {
        /* height: 0%; */
        overflow: hidden;
        display: grid;
        /* display: none; */
        position: fixed;
        position-anchor: --gtp;
        position-area: bottom right;
        border: 2px solid var(--c-60);
        border-top: none;
        background: linear-gradient(-45deg, var(--c-50), hsl(from var(--c-50) h s calc(l * 1.2)), var(--c-50));
        font-family: var(--font-d1);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.298);
        padding: 1rem;
        border-radius: 0 0 0.5rem 0.5rem;
        text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2);
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(2, auto);
        z-index: 4;
        /* transform: translateY(-50%); */
        transform: translateY(-150%);
        width: max-content;
        gap: 0.5rem;
        transition: all 0.5s;
        transition-behavior: allow-discrete;
        top: -100%;
        top: 0%;
        right: 1rem;
        color: var(--c-100);
        align-items: center;
        --light-color: var(--ca-50);
        --middle-color: var(--ca-20);
        --dark-color: var(--ca-70);
        --icon-color: var(--c-10);


        .button-inset {
            border-radius: 100%;
            border: solid 0.15rem var(--c-30);
            background: var(--c-60);
            position: relative;
            --icon-size: 2.5rem;
            width: var(--icon-size);
            height: var(--icon-size);
            transition: background 0.3s;

            &:has(input:checked) {
                background: var(--c-80);
            }

            &:has(input:focus-visible)+label {
                color: var(--ca-a2);
                text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 1rem var(--ca-a2);
            }
        }

        &:has(input:focus-visible) {
            display: grid;
            transform: translateY(0%);
            top: 0;
            height: auto;

        }


        /* .heavy-gore-toggle-wrapper,
        .moderate-gore-toggle-wrapper { */
        .filter-toggle-wrapper {

            position: relative;
            position: absolute;
            inset: 10%;
            /* inset: 0%; */
            /* width: calc(var(--icon-size) - 10%);
            height: calc(var(--icon-size) - 10%); */
            /* width: var(--icon-size);
            height: var(--icon-size); */
            border-radius: inherit;
            background: linear-gradient(to bottom, var(--dark-color), var(--light-color));
            background: linear-gradient(to bottom, var(--dark-color), var(--light-color));
            box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.427);
            z-index: 1;
            align-content: center;
            display: flex;

            &::before {
                border-radius: inherit;
                content: '';
                position: absolute;
                inset: 0.5rem;
                inset: 10%;
                /* inset: -40%; */
                z-index: -1;
                background: linear-gradient(to top, var(--dark-color), var(--light-color));
                transition: all 0.5s;
                /* background:blue; */

            }

            svg,
            use,
            input {
                position: absolute;
                inset: 0%;
                /* margin: 0.5rem; */
                /* V WHY DO I NEED THIS */
                /* max-height: 100%; */
            }

            input {
                opacity: 0.5;
                opacity: 0;
                cursor: pointer;
                z-index: 4;
            }

            svg {
                filter: drop-shadow(0 0 0 var(--icon-color));
                position: absolute;
                width: 100%;
                height: 100%;
                /* padding: 0.2rem; */
                padding: 15%;
                /* background-color: rgba(255, 166, 0, 0.2); */
                /* use{
                    background-color: rgba(38, 0, 255, 0.2);
                } */
            }



            &:has(input:hover, input:focus-visible),
            &:has(input:hover, input:focus-visible)::before {
                filter: brightness(1.2);
            }

            &:has(input:active),
            &:has(input:active)::before {
                filter: brightness(0.9);
            }

            &:has(input:checked) {
                box-shadow: 0 0rem 0.5rem rgba(0, 0, 0, 0.427);
                filter: drop-shadow(0 0 0.3rem var(--ca-a2));

                svg {
                    filter: drop-shadow(0 0 0.2rem var(--icon-color));

                }
            }

            &:has(input:checked),
            &:has(input:checked)::before {
                --light-color: var(--ca-a2);
                --middle-color: var(--ca-20);
                --dark-color: var(--ca-a2-dark);
            }
        }
    }