#uwu4 {
    grid-area:2/1/4/-1;
    .cobble {
        height:100%;
        display:grid;
        grid-template-columns:6.5rem repeat(20,minmax(0,1fr)) 6.5rem;
        gap:1.25rem;
    }
    .cobble>div {
        display: flex;
        flex-direction: column;
        gap:0.4rem;
        padding:0.9rem;
        border-radius:1rem;
        transform:translateZ(0.2rem);
        &>div {
            display:none;
            flex-direction:column-reverse;
            justify-content:flex-end;
            overflow-y:scroll;
            transform:translateZ(0.3rem);
            .head {
                display:flex;
                align-items:center;
                justify-content:space-between;
                padding-bottom:0.3rem;
                margin-bottom:0.6rem;
                border-bottom:0.14rem solid transparent;
                border-image:var(--color-gradient-5) 1;
                h3 {
                    margin:0 0.5rem 0 0.1rem;
                    &>.fas {
                        margin-right:0.22rem;
                        font-size:1.24rem;
                    }
                }
                .button .fas {
                    font-size:0.95rem;
                    transition:transform 0.5s ease-in-out;
                }
            }
            .body { overflow-y:scroll; }
        }
    }
    #left {
        grid-area:1/1/2/5;
        #tags {
            flex-shrink:0;
            counter-reset:tags 0;
            .body {
                display:flex;
                flex-wrap:wrap;
                align-items:center;
                justify-content:center;
                padding:0.1rem 0 0.4rem;
            }
            .head h3::after {
                content:"-"counter(tags)"-";
                margin-left:0.35rem;
            }
        }
        #archives {
            .body {
                display:flex;
                flex-direction:column;
                gap:0.4rem;
                input[type="checkbox"]:checked {
                    ~div { max-height:0; }
                    ~label>.fas { transform:rotateX(180deg); }
                }
                &>div {
                    counter-reset:archives 0;
                    display:flex;
                    flex-direction:column-reverse;
                    margin:0 0.25rem;
                    * {
                        line-height:1.68;
                        font-size:0.95rem;
                    }
                    label {
                        margin:0.1rem 0;
                        font-weight:bold;
                        cursor:pointer;
                        &::after { content:" ("counter(archives)")"; }
                        .fas {
                            margin-right:0.2rem;
                            transform:translateY(-0.02rem);
                            transition:transform 0.25s ease-in-out;
                        }
                    }
                    div {
                        display:flex;
                        flex-direction:column;
                        margin-left:1rem;
                        max-height: 70dvh;
                        transition: max-height 0.7s ease;
                        &>p {
                            counter-increment:archives 1;
                            &::before { content:"『"; }
                            &::after { content:"』"; }
                        }
                    }
                }
            }
            .head h3::after {
                visibility:hidden;
                content:"0";
            }
            #awa4:checked {
                ~.head h3::after { content:"1"; }
                ~.head .button>.fas { transform:rotate(-180deg); }
                ~.body { &,&>div>div { flex-direction:column-reverse; } }
            }

        }
        #info {
            flex-shrink:0;
            .body .brief {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                width:100%;
                height: 100%;
                padding: 0 0.4rem 0.2rem 0;
                p {
                    display: flex;
                    align-items: center;
                    height: 2rem;
                    gap:0.3rem;
                }
            }
        }
        #content {
            .body .list {
                width:95%;
                padding:0 0 0.6rem 0;
                h1 {
                    &,* { font-size: 1.05rem; }
                    margin-left: 0.5rem;
                }
                h2 {
                    &,* { font-size: 0.9rem; }
                    margin-left: 2rem;
                }
                h3 {
                    &,* { font-size: 0.8rem; }
                    margin-left:3rem;
                }
                &>* {
                    display: block;
                    overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                    margin-bottom: 0.25rem;
                    a:hover {
                        cursor: pointer;
                        &::before { content:"# "; }
                    }
                }
            }
        }
    }
    #right {
        grid-area:1/-5/2/-1;
        #stats {
            flex-shrink:0;
            .body {
                display:grid;
                grid-template-columns:repeat(2,100%);
                gap:1rem;
                overflow-x:hidden;
                &>div { transition:transform 0.5s ease-in-out; }
            }
            #table>table {
                width:100%;
                border-collapse:collapse;
                td {
                    padding:0.25rem 0.5rem;
                    text-align:center;
                    border-bottom:0.08rem solid var(--color-border-1);
                    &:first-child { font-weight:bold; }
                    &:last-child { font-style:italic; }
                }
                tr {
                    transition:background-color 0.2s ease-in-out;
                    &:nth-child(odd) { background:var(--color-table-odd); }
                    &:hover { background:var(--color-table-hover); }
                }
            }
            #paper {
                padding:0 0.2rem;
                text-align:center;
                h4 { justify-content: center; }
                p { margin-bottom:0.6rem; }
            }
            #awa2:checked {
                ~.head .switch>.fas { transform:rotate(540deg); }
                ~.body>div { transform:translateX(calc(-100% - 1rem)); }
            }
        }
        #history {
            #awa3:checked~.head .reverse>.fas { transform:rotate(40deg); }
            .new,#awa3:checked~:is(.body,.head) .old { display:inline-flex; }
            .old,#awa3:checked~:is(.body,.head) .new { display:none; }
            .head b { font-size:1.4rem; }
            .body {
                height:100%;
                &>div {
                    flex-direction:column;
                    position:absolute;;
                    gap:1rem;
                    width:100%;
                    overflow-x:hidden;
                    transition:opacity 0.5s ease-in-out;
                    animation:scale-up-center 0.5s cubic-bezier(0.390,0.575,0.565,1.000) both;
                    * { font-size:0.95rem; }
                }
                fieldset {
                    background:linear-gradient(to left,var(--color-bg-3),transparent 90%);
                    min-inline-size:auto;
                    border:0.14rem solid var(--color-border-1);
                    border-radius:1rem;
                    padding:0 0.5rem 0.5rem;
                    &>h5 {
                        margin-left:1rem;
                        font-size:0.9rem;
                        text-align:right;
                        &::before { content:"From.『"; }
                        &::after { content:"』"; }
                    }
                    legend {
                        margin:auto;
                        padding:0.1rem 0.5rem;
                        font-weight:bold;
                        .far {
                            margin-left:0.18rem;
                            font-size:0.9rem;
                        }
                        ~p {
                            font-style:italic;
                            font-size:0.85rem;
                            text-align:center;
                        }
                    }
                    .content { margin:0.5rem 0.3rem; }
                }
            }
        }
    }
}