#uwu5 {
    counter-reset:test -1;
    grid-area:2/5/4/-5;
    display:flex;
    flex-direction:row-reverse;
    border-radius:1rem;
    transform:translateZ(0.2rem);
    z-index:100;
    &>* { height:100%; }
    #ovo1:checked {
        ~#carton>#layer1 .head span::after { content:"倒序"; }
        ~#carton>#float .layer1 .reverse>.fas { transform:rotate(-180deg); }
    }
    #ovo2:checked {
        ~#carton>#layer2 #markdown { display: none; }
    }
    input[type="radio"]:checked {
        +input+input+input+div~div .search,+input+input+div~div .home,+input+div~div .console,+div~div .comments { background:var(--color-bg-4); }
        &:not(#uvu1) {
            ~#carton #layer2,+input+input+input+div #search,+input+div #console,+div #comments { display:flex; }
            ~#binding .layer { .fas::before { content:"\f2d2"; } }
            ~#carton #layer1 { opacity:0.2; }
            ~#carton .layer2,+input+input+#carton .layer2 .search,+input+#carton .layer2 .console,+#carton .layer2 .comment { display:inline-block; }
            ~#carton .layer1 { display:none; }
        }
    }
    #uvu4:checked {
        ~#binding .search { animation: fade 0.4s ease forwards; }
    }
    #binding {
        .buttons {
            display:flex;
            flex-direction:column;
            gap:0.35rem;
            margin:0.7rem 0.5rem;
            hr {
                background:var(--color-gradient-4);
                width:105%;
                height:0.14rem;
                margin:0.5rem 0;
            }
            .button {
                width:2.12rem;
                height:2.12rem;
                margin:0.1rem 0;
                transform:translateZ(0.4rem);
                .fas { font-size:1.05rem; }
                &:hover .fas+span {
                    visibility:visible;
                    opacity:1;
                    left:2.75rem;
                }
                &.layer {
                    background:var(--color-bg-4);
                    span::after { content:"第"counter(test)"层"; }
                }
                .fas+span {
                    visibility:hidden;
                    opacity:0;
                    position:absolute;
                    background:var(--color-gradient-7);
                    top:0;
                    left:3.5rem;
                    width:max-content;
                    padding:10% 18%;
                    border:0.14rem solid var(--color-border-5);
                    border-radius:0.35rem;
                    letter-spacing:0.05rem;
                    box-shadow:0.5rem 0.5rem 1rem var(--color-shadow-3);
                    transform:translate3d(0,-0.01rem,0.2rem);
                    transition:left 0.18s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out;
                    &::before {
                        content:" ";
                        position:absolute;
                        border:0.5rem solid transparent;
                        border-right-color:var(--color-primary-8);
                        width:0;
                        height:0;
                        left:-1.05rem;
                        top:25%;
                    }
                }
            }
            .search {
                visibility: hidden;
                opacity:0;
                animation: fade- 0.3s ease forwards;
            }
        }
    }
    hr {
        background:var(--color-gradient-6);
        width:0.14rem;
        margin:0.3rem 0;
    }
    #carton {
        width:100%;
        transform:translateZ(0.3rem);
        &>div {
            counter-increment:test 1;
            position:absolute;
            padding:0.8rem 1rem;
            &,&>div { width:100%; }
            &:not(#float) { height:100%; }
        }
        #float {
            padding-bottom:0;
            text-align:right;
            transform: translateZ(0.2rem);
            .buttons>div { display:inline-block; }
            .buttons .layer2 { &,&>div { display:none; } }
            .button {
                background:var(--color-bg-4);
                width:1.85rem;
                height:1.85rem;
                margin-left:0.3rem;
            }
        }
        #layer1 {
            transition:opacity 0.1s ease-in-out;
            &>* { display: none; }
            #essays {
                counter-reset:page 0;
                flex-direction:column-reverse;
                justify-content:flex-end;
                height: 100%;
                #flip {
                    display:flex;
                    flex-direction:column;
                    gap:0.5rem;
                    position:absolute;
                    bottom:0.8rem;
                    right:0;
                    transform:translateX(0.3rem);
                    * {
                        font-size:1.05rem;
                        font-weight: bold;
                        color:var(--color-text-3);
                        text-shadow:0 0 1.5rem var(--color-shadow-5);
                        transition:color 0.3s ease;
                    }
                    a,span {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    &>div:hover {
                        background-color:unset;
                        * { color:var(--color-text-3-hover); }
                    }
                }
                .body {
                    overflow:hidden;
                    .page {
                        counter-increment:page 1;
                        overflow: hidden;
                        height:0;
                        &:target { height:100%; }
                    }
                }
                .head {
                    margin:0.4rem 0 1rem;
                    h3::after { content:"更新时间 新-旧 共有"counter(page)"页（右下角翻页）"; }
                    * { font-size:1.2rem; }
                    .fas { margin-right:0.5rem; }
                }
            }
            #essay {
                flex-direction:column;
                overflow-y:scroll;
                height: 100%;
                .body {
                    margin-right: 0.7rem;
                    transform: translateY(-0.5rem);
                    &>* {
                        line-height: 1.75;
                        margin: 0.8rem 0;
                    }
                    h1:not(:first-of-type),h2 { margin-top: 4%; }
                    h3,h4 { margin-top: 3%; }
                    h5,h6 { margin-top: 2%; }
                    h1,h2,h3 {
                        cursor: pointer;
                        &>a {
                            width:100%;
                            font-size:inherit;
                            text-decoration: none;
                        }
                        &:hover a::after {
                            content:"#";
                            margin-left: 0.5rem;
                        }
                    }
                    details br { display: none;}                        
                    table {
                        background:transparent;
                        width:100%;
                        border-spacing:0;
                        border:2px solid rgba(50, 55, 58,0.8);
                        border-radius:5px;
                        margin:14px 0;
                    }
                    table * {
                        font-size:0.95em;
                    }
                    thead>tr>th {
                        vertical-align:bottom;
                    }
                    tr>th,tr>td {
                        padding:8px;
                        vertical-align:top;
                    }
                    td,th {
                        text-align:left;
                    }
                    tbody>tr:nth-child(odd)>td,tbody>tr:nth-child(odd)>th {
                        background:var(--color-border-7);
                        &,* { color:#bebebe; }
                    }
                    thead>tr,tbody>tr:nth-child(even)>td,tbody>tr:nth-child(even)>th {
                        background:var(--color-primary-10);
                    }
                }
            }
        }
        #layer2 {
            padding:1.1rem 1rem;
            animation:fade 0.1s ease-in-out;
            z-index:150;
            &,&>* { display:none; }
            #console {
                flex-direction:row;
                .head {
                    align-items:baseline;
                    padding:0.3rem 1.2rem 0 0;
                    writing-mode:vertical-rl;
                    * { letter-spacing:0.4rem; }
                    .fas {
                        width:1.6rem;
                        height:1.6rem;
                        padding:0.01rem 0 0 0.03rem;
                        margin-bottom:0.6rem;
                        font-size:1.6rem;
                        animation:rolling 1.6s linear infinite;
                    }
                }
                .body {
                    width:100%;
                    fieldset {
                        width:90%;
                        padding:0.7rem;
                        margin-bottom:2rem;
                        border-top:0.14rem solid var(--color-border-3);
                        border-radius:2%;
                        legend {
                            margin:auto;
                            padding:0 0.5rem;
                        }
                    }
                    h4 { font-size:1.15rem; }
                }
            }
            #comments {
                flex-direction: column;
                padding:0 0.3rem;
                &>div { width:100%; }
                .head h2 {
                    span { font-size: 1.42rem; }
                    .fas {
                        margin-right:0.4rem;
                        font-size:1.8rem;
                    }
                }
                .body {
                    display: grid;
                    height: 100%;
                    overflow: hidden;
                    grid-template-columns: auto max-content;
                    #forum {
                        background: rgba(160, 180, 190, 0.17);
                        margin:0.8rem 1rem 0.8rem 0;
                        padding:1rem 0.7rem;
                        height: 6rem;
                        border:0.15rem dashed var(--color-border-6);
                        border-radius:1rem;
                        font-size: 1.02rem;
                        line-height: 1.4;
                        textarea {
                            background-color:transparent;
                            width:100%;
                            height:100%;
                            padding:0 0.4rem;
                            resize: none;
                            & { color:var(--color-text-4); }
                            &~* { transform: translateX(-0.6rem); }
                            &::placeholder { color:var(--color-text-2); }
                            &:focus {
                                &~#responses { height:4rem; }
                                &~.comments { height:20rem; }
                            }
                        }
                        #responses {
                            margin-top:1.5rem;
                            overflow: hidden;
                            height:0;
                            transition:height 0.5s ease;
                            h3 { font-size: 1.15rem; }
                            .button {
                                width: auto;
                                height: auto;
                                margin: 0.3rem 0.5rem;
                                padding: 0.2rem 0.6rem;
                                font-size:0.96rem;
                            }
                        }
                        #submit {
                            display: flex;
                            justify-content: space-between;
                            gap: 0.5rem;
                            margin-bottom: 1.35rem;
                            #user {
                                background: transparent;
                                padding:0.07rem;
                                margin:0 0.5rem 0.1rem 0;
                                width: 100%;
                                border-bottom:0.15rem solid var(--color-border-6);
                                font-size:1rem;
                                & { color:var(--color-text-4); }
                                &::placeholder { color:var(--color-text-2); }
                            }
                            button {
                                background:var(--color-primary-6);
                                padding: 0.2rem 1rem;
                                border: 0.15rem solid var(--color-border-7);
                                border-radius: 1rem;
                                cursor:pointer;
                                * {
                                    font-size:0.9rem;
                                    color:var(--color-text-4);
                                    white-space: nowrap;
                                }
                            }
                        }
                        .comments {
                            display: flex;
                            flex-direction: column;
                            width: 106%;
                            height: 23.5rem;
                            padding-right: 1rem;
                            overflow-y: scroll;
                            transition:height 0.5s ease;
                            .all {
                                display: flex;
                                flex-direction: column-reverse;
                                align-items: flex-start;
                            }
                            .comment {
                                max-width:60%;
                                &>h3 {
                                    margin: 0 0 0.5rem 0;
                                    font-size: 1rem;
                                    cursor: pointer;
                                    &:empty::after { content: "test"; }
                                    &:hover::before { content:"@" }
                                }
                                .bubble {
                                    width: fit-content;
                                    min-width: 3rem;
                                    min-height: 2rem;
                                    background: var(--color-primary-10);
                                    position: relative;
                                    margin-bottom: 1.2rem;
                                    padding: 0.5rem 0.1rem 0.5rem 0.5rem;
                                    border: 0.14rem solid var(--color-border-3);
                                    border-radius: 0.8rem;
                                    transition:all 1s ease;
                                    cursor: pointer;
                                    .content {
                                        max-height: 6rem;
                                        padding:0 0.4rem 0 0;
                                        overflow-y: auto;
                                        transform:scale(0.9);
                                        transition:all 1s ease;
                                        &:empty::after { content: "在框中输入的文本将于此处预览"; }
                                    }
                                    &,* * { overflow-wrap: anywhere; }
                                    &::before {
                                        content: " ";
                                        position: absolute;
                                        border: 0.61rem solid transparent;
                                        border-bottom-color: var(--color-border-3);
                                        top: 0;
                                        left: 1rem;
                                        transform: translateY(-1.2rem);
                                    }
                                }
                            }
                            .preview {
                                align-self: flex-end;
                                &>h3 { justify-content: flex-end; }
                                .bubble {
                                    background: var(--color-primary-7);
                                    margin-left: auto;
                                    &::before {
                                        border-bottom-color: var(--color-border-3);
                                        left:unset;
                                        right:1rem;
                                    }
                                }
                            }
                        }
                    }
                    #markdown {
                        margin-top:0.5rem;
                        overflow-x: hidden;
                        overflow-y: scroll;
                        border-left: 0.12rem solid var(--color-border-1);
                        .content {
                            width:max-content;
                            margin:0 1rem;
                            transform: translateY(-1.5rem);
                            * {
                                color:var(--color-text-4);
                                height:3rem;
                                display:flex;
                                align-items: end;
                            }
                            &::before {
                                content:"";
                                position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                background-image: linear-gradient(var(--color-border-1) 0.1rem, transparent 0.1rem);
                                background-size: 100% 1.5rem;
                                background-position: 0 2.8rem;
                                z-index: 0;
                            }
                        }
                    }
                }
            }
            #search {
                flex-direction: column;
                .head {
                    h2 {
                        &,* { font-size: 1.2rem; }
                        .fas { margin-right: 1rem;}
                    }
                    margin-bottom: 0.5rem;
                }
                .body {
                    width:100%;
                    height:100%;
                }
            }
        }
        #essays,#search {
            .essay {
                counter-increment:essays 1;
                margin:0 0.2rem 0.8rem;
                padding:0.6rem 0;
                width:92%;
                border-bottom:0.14rem dashed var(--color-border-4);
                cursor:pointer;
                animation: scale-up-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                * { line-height:1.57; }
                h2::before { font-size:1.7rem; }
                p {
                    display:flex;
                    flex-wrap:wrap;
                    span { margin-right:0.5rem; }
                    span:first-letter {
                        font-size:0.96rem;
                        font-weight:bold;
                    }
                }
            }
        }
    }
}