:root {
    /* 主要渐变色 */
    --color-primary-1: rgba(100,140,130,0.95);
    --color-primary-2: rgba(90,150,160,0.95);
    --color-gradient-1: linear-gradient(135deg,var(--color-primary-1),var(--color-primary-2));

    --color-primary-3: rgba(115,135,150,0.55);
    --color-primary-4: rgba(115,145,135,0.6);
    --color-gradient-2:linear-gradient(160deg,var(--color-primary-3),var(--color-primary-4) 50%);
    
    --color-primary-5: rgba(120,140,150,0.2);
    --color-primary-6: rgba(120,130,130,0.22);
    --color-gradient-3:linear-gradient(160deg,var(--color-primary-5),var(--color-primary-6) 50%);
    
    --color-primary-7: rgba(220,230,225,0.15);
    --color-primary-8: rgba(210,215,220,0.25);
    --color-primary-9: rgba(220,230,230,0.15);
    --color-gradient-4:linear-gradient(to right,var(--color-primary-7) 0%,var(--color-primary-8) 50%,var(--color-primary-9) 100%);
    
    --color-primary-10:rgba(30,50,60,0.05);
    --color-primary-11:rgba(30,50,60,0.5);
    --color-gradient-5:linear-gradient(to right,var(--color-primary-10) 0%, var(--color-primary-11) 10%, var(--color-primary-11) 90%, var(--color-primary-10) 100%);

    --color-primary-12: rgba(60,80,77,0.4);
    --color-gradient-6:linear-gradient(to bottom,transparent 0%,var(--color-primary-12) 7%,transparent 80%);
    
    --color-primary-13: rgba(105,135,140,0.85);
    --color-primary-14: rgba(105,120,135,0.85);
    --color-gradient-7:linear-gradient(150deg,var(--color-primary-13) 0%,var(--color-primary-14) 100%);

    /* 背景相关 */
    --color-bg-1: rgba(240,245,244,0.2);
    --color-bg-2: rgba(40,45,44,0.2);
    --color-bg-3: rgba(240,247,250,0.05);
    --color-bg-4: rgba(200,250,240,0.1);
    
    /* 文字相关 */
    --color-text-1: rgba(16,22,20,0.85);
    --color-text-2: rgba(32,43,40,0.85);
    --color-text-3: rgba(150,160,155,0.8);
    --color-text-3-hover: rgba(190,200,195,0.8);
    --color-text-4: rgba(26,32,33,0.85);
    --color-text-5: rgba(160,170,165,0.85);
    
    /* 边框和分隔线 */
    --color-border-1: rgba(255,255,255,0.1);
    --color-border-2: rgba(210,210,210,0.2);
    --color-border-3: rgba(30,40,45,0.4);
    --color-border-4: rgba(40,60,55,0.4);
    --color-border-5: rgba(255,255,255,0.13);
    --color-border-6: rgba(28,38,37,0.6);
    --color-border-7: rgba(32,40,43,0.6);
    
    /* 交互元素 */
    --color-shadow-1: rgba(10,20,15,0.1);
    --color-shadow-2: rgba(10,15,20,0.1);
    --color-shadow-3: rgba(30,60,80,0.2);
    --color-shadow-4: rgba(50,80,120,0.15);
    --color-shadow-5: rgba(20,40,40,0.8);
    
    /* 标签颜色 */
    --color-tag-1: rgba(150,200,150,0.4);
    --color-tag-2: rgba(100,203,185,0.4);
    --color-tag-3: rgba(48,203,209,0.4);
    --color-tag-4: rgba(61,200,234,0.4);
    --color-tag-5: rgba(140,191,247,0.4);
    --color-tag-6: rgba(170,185,245,0.4);
    
    /* 表格颜色 */
    --color-table-odd: rgba(255,255,255,0.03);
    --color-table-hover: rgba(255,255,255,0.08);
}
@font-face {
    font-family:"ZCOOLXiaoWei-Regular";
    src:url("../webfonts/ZCOOLXiaoWei-Regular.ttf") format("truetype");
}
::-webkit-scrollbar { width:0.35rem; }
::-webkit-scrollbar-track,::-webkit-scrollbar-corner { display:none; }
::-webkit-scrollbar-thumb {
    background:var(--color-bg-1);
    border-radius:0.15rem;
    box-shadow:0 0 0.5rem var(--color-bg-2);
}
* {
    margin:0;
    padding:0;
    outline:none;
    border:none;
    box-sizing:border-box;
    box-decoration-break:clone;
    tab-size:4;
    line-height:1.45;
    letter-spacing:0.08rem;
    word-wrap:break-word;
    overflow-wrap:break-word;
    color:var(--color-text-1);
    font-size:1rem;
    font-family:"ZCOOLXiaoWei-Regular","Microsoft Yahei UI Light";
    text-underline-position:under;
    text-decoration-thickness:0.08rem;
    text-decoration-color:var(--color-text-2);
    transform-style:preserve-3d;
    -webkit-overflow-scrolling:touch;
    
  scroll-behavior: smooth;
  -webkit-scroll-behavior: smooth; /* Safari */
  -moz-scroll-behavior: smooth; /* Firefox */
  -ms-scroll-behavior: smooth; /* IE/Edge */
}
.ellipsis {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
input[type="checkbox"],input[type="radio"] { display:none; }
input[type="range"] {
    appearance:none;
    width:90%;
    height:0.3rem;
    border-radius:0.15rem;
    background:var(--color-bg-1);
    outline:none;
    margin:0.75rem 0;
    cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb {
    appearance:none;
    width:0.75rem;
    height:0.75rem;
    border:none;
    border-radius:25%;
    background:var(--color-gradient-1);
    box-shadow:0 0 0.5rem var(--color-bg-2);
}
input[type="range"]::-moz-range-thumb,input[type="range"]::-ms-thumb {
    width:0.75rem;
    height:0.75rem;
    border:none;
    border-radius:25%;
    background:var(--color-gradient-1);
    box-shadow:0 0 0.5rem var(--color-bg-2);
}
input[type="range"]::-moz-range-track,input[type="range"]::-ms-track {
    width:100%;
    height:0.3rem;
}
input[type="range"]::-ms-fill-lower,input[type="range"]::-ms-fill-upper,input[type="range"]::-moz-range-track,input[type="range"]::-ms-track {
    background:var(--color-bg-1);
    border-radius:0.15rem;
}
input[type="range"]::-ms-track {
    background:transparent;
    border-color:transparent;
    color:transparent;
}
h1 { font-size:2.1rem; }
h2 { font-size:1.6rem; }
h3 { font-size:1.4rem; }
h4 { font-size:1.1rem; }
h5 { font-size:0.9rem; }
h6 { font-size:0.8rem; }
h1,h2,h3,h4,h5,h6 {
    display: flex;
    align-items: center;
}
summary {
    cursor: pointer;
}
ul {
    padding-left:1.4rem;
}
ol {
    counter-reset: num 0;
    list-style-type: none;
    li {
        counter-increment: num 1;
        &::before {
            content: counter(num);
            display: inline-flex;
            text-align: center;
            width: 1.2rem;
            height: 1.2rem;
            margin-right:0.4rem;
            background: var(--color-bg-1);
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color:var(--color-text-4);
        }
        &.footnote-item::before {
            border-radius: 25%;
        }
    }
    li & {
        padding-left: 1.4rem;
    }
}
pre,code {
    border-radius:0.4rem;
    white-space:pre-wrap;
    background:var(--color-text-1);
    &>code { background: unset; }
    &,* {
        font-size:0.95em;
        color:#ccc;
    }
}
code {
    padding:0.2rem 0.4rem;
}
pre { 
    padding:12px;
    border:0.07rem solid rgba(75, 93, 76,0.6);
    margin: 0.5rem 0;
}
blockquote {
    position: relative;
    padding-left: 1.2rem;
}

blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 0.42rem;
    background: rgba(50, 50, 50, 0.9);
    border-radius: 0.2rem
}
mark {
    background-color:rgba(68, 255, 0,0.4);
    padding: 0.15rem 0.2rem;
    border-radius: 0.2rem;
}
html {
    background:var(--color-gradient-2),url("../resources/background.jpg") no-repeat fixed center / cover;
    overflow:hidden;
    body {
        backdrop-filter:brightness(0.8) blur(0.02rem);
        height:100dvh;
        width:100vw;
    }
}
.fas,.far { padding:0.04rem 0 0 0.1rem; }
.button {
    display:inline-block;
    width:1.9rem;
    height:1.9rem;
    border-radius:0.5rem;
    text-align:center;
    align-content:center;
    font-size:1.1rem;
    cursor:pointer;
    transition:background-color 0.17s ease-in-out;
    &:hover { background-color:var(--color-bg-4); }
}
.colorful {
    counter-increment:tags 1;
    background:var(--color-tag-1);
    margin:0.2rem 0.14rem 0.2rem;
    padding:0.08rem 0.55rem;
    border-radius:0.9rem;
    color:#0a1400;
    font-size:0.93rem;
    transition:transform 0.1s ease-in-out,box-shadow 0.15s ease-in-out;
    cursor:pointer;
    box-shadow:0 0 0.4rem 0.1rem var(--color-shadow-1);
    &:hover {
        transform:scale(1.05);
        box-shadow:0.1rem 0.1rem 0.5rem 0.15rem var(--color-shadow-2);
    }
    &:nth-child(2n) {
        background:var(--color-tag-2);
        color:#001b1d;
    }
    &:nth-child(3n) {
        background:var(--color-tag-3);
        color:#021e1e;
    }
    &:nth-child(4n) {
        background:var(--color-tag-4);
        color:#041123;
    }
    &:nth-child(5n) {
        background:var(--color-tag-5);
        color:#0d0d20;
    }
    &:nth-child(6n) {
        background:var(--color-tag-6);
        color:#1d0b27;
    }
}
#main {
    display:grid;
    grid-template-columns:6.5rem repeat(20,minmax(0,1fr)) 6.5rem;
    grid-template-rows:6.5rem 6.5rem minmax(0,1fr);
    gap:1.25rem;
    height:100dvh;
    margin:auto;
    padding:1.7rem 1.6rem 1.8rem;
    aspect-ratio:16/9;
    #cut:checked {
        ~#uwu3,~#uwu4 { display: block; }
        ~#uwu5 { display: none; }
    }
    #uwu1,#uwu3,.cobble>div,#uwu5,#uwu6>div,#uwu7 {
        background:var(--color-gradient-3);
        min-height:0;
        border:0.17rem solid var(--color-border-1);
        box-shadow:0.2rem 0.2rem 2rem var(--color-shadow-3),inset 0 0 4rem var(--color-shadow-4);
    }
    &>div { cursor:default }
    #uwu1 {
        grid-area:1/1/2/2;
        border-radius:45%;
        transform:translateZ(0.6rem);
    }
    #uwu2 {
        grid-area:1/2/2/-4;
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:end;
        justify-items:stretch;
        height:95%;
        border-bottom:0.18rem solid var(--color-border-2);
        border-radius:2%;
        transform:translateZ(0.2rem);
        #title {
            padding: 0.5rem;
            .fas { margin-right:0.3rem; }
            h1 { transform:translateZ(0.3rem); }
            h4 { transform:translateZ(0.2rem); }
        }
        #pages {
            padding:0 0 0.4rem 0.4rem;
            transform:translateZ(0.4rem);
            .button {
                width:4.72rem;
                /* min-width:fit-content; */
                margin:0 0 0.25rem;
                * { font-size:1.05rem; }
                .fas { margin-right:0.2rem; }
            }
        }
    }
    #uwu3 {
        grid-area:1/-4/2/-1;
        border-radius:15%;
        transform:translateZ(0.5rem);
    }
    #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 { 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;
                            &>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; }
                    }
                }
            }
        }
    }
    #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;
                    #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.8;
                            margin: 0.9rem 0;
                        }
                        h1,h2 { margin-top: 2%; }
                        h3,h4 { margin-top: 1.5%; }
                        h5,h6 { margin-top: 1%; }
                        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: 105%;
                                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"; }
                                    }
                                    .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;
                    /* transform:translateZ(0.1rem); */
                    * { 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;
                        }
                    }
                }
            }
        }
    }
    #uwu6 {
        display:flex;
        flex-direction:column-reverse;
        align-items:flex-end;
        position:absolute;
        max-height:90dvh;
        bottom:2.5rem;
        right:0;
        transform:translateZ(2.5rem);
        &>div {
            background:rgba(90,113,115,0.7);
            width:max-content;
            min-height:max-content;
            margin:0.7rem;
            padding:0.8rem 2rem;
            border-radius:2rem;
            backdrop-filter:contrast(0.7);
            box-shadow:0 0.5rem 2rem var(--color-shadow-3);
            animation:fade-in-out 2.7s ease-in-out both;
            .head {
                margin-bottom:0.11rem;
                .fas { margin-right:0.37rem; }
            }
        }
    }
    #uwu7 {
        display: none;
        label {
            width:100%;
            height:100%;
        }
    }
}
@media screen and (max-aspect-ratio:11/6) {
    #main {
        aspect-ratio:5/3;
    }
}
@media screen and (max-aspect-ratio:5/3) {
    #main {
        width:100vw;
        aspect-ratio:unset;
    }
}
@media screen and (max-aspect-ratio:3/2) {
    #main {
        #uwu2 #pages .button {
            width:4.3rem;
            margin:0 0 0.18rem;
            * { font-size:1rem; }
            .fas { margin-right:0.15rem; }
        }
        #uwu4 {
            grid-area:2/-7/4/-1;
            background:var(--color-gradient-3);
            border:0.17rem solid var(--color-border-1);
            border-radius:1rem;
            box-shadow:0.2rem 0.2rem 2rem var(--color-shadow-3),inset 0 0 4rem var(--color-shadow-4);
            padding: 0.9rem;
            .cobble {
                display:block;
                overflow-y: scroll;
                &::-webkit-scrollbar { display: none; }
                &>div {
                    background: unset;
                    border: unset;
                    box-shadow: unset;
                    padding:unset;
                    &>div { padding:0 0 0.9rem 0;}
                }
            }
        }
        #uwu5 {
            grid-area:2/1/4/-7;
        }
    }
}
@media screen and (max-aspect-ratio:4/3) {
    #main {
        grid-template-columns:6rem repeat(20,minmax(0,1fr)) 6rem;
        grid-template-rows:6rem 6rem minmax(0,1fr);
        #uwu2 #title {
            h1 {
                font-size: 1.8rem;
                span { display: none; }
            }
            h4 { font-size:1rem; }
        }
    }
}
@media screen and (max-aspect-ratio:8/7) {
    #main {
        grid-template-columns:6rem minmax(0,1fr) minmax(0,1fr) 5.5rem 1.5rem;
        #uwu2 {
            grid-area:1/2/2/-1;
        }
        #uwu3 {
            display: none;
            grid-area:2/-4/2/-2;
            border-radius: 2rem;
        }
        #uwu4 {
            display: none;
            grid-area:2/1/4/-2;
            background: unset;
            border: unset;
            box-shadow: unset;
            padding: unset;
            .cobble {
                display: grid;
                grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                grid-template-rows:6rem minmax(0,1fr);
                &>div {
                    
                    gap:1.25rem;
                }
                &>div>div {
                    background:var(--color-gradient-3);
                    border:0.17rem solid var(--color-border-1);
                    border-radius:1rem;
                    box-shadow:0.2rem 0.2rem 2rem var(--color-shadow-3),inset 0 0 4rem var(--color-shadow-4);
                    padding: 0.9rem;
                }
                #left {
                    grid-area: 1/1/-1/1;
                }
                #right {
                    grid-area: 2/2/-1/2;
                }
            }
        }
        #uwu5 {
            grid-area:2/1/4/-2;
        }
        #uwu7 {
            display: block;
            grid-area:2/-2/4/-1;
            border-radius:0.5rem;
            .fas { color:var(--color-text-3) }
            &:hover .fas { color:var(--color-text-3-hover) }
        }
    }
}
@media screen and (max-aspect-ratio:2/3) {
    #main {
        padding:0.5rem;
        gap:0.75rem;
        #uwu4 {
        }
    }
}
@keyframes scale-up-center {
    0% {
        opacity:0;
        transform:scale(0.75);
    }
    80% { transform:scale(1); }
    100% { opacity:1; }
}
@keyframes fade {
    0% { 
        visibility:hidden;
        opacity:0;
    }
    100% {
        visibility:visible;
        opacity:1;
    }
}
@keyframes fade- {
    100% { 
        visibility:hidden;
        opacity:0;
    }
    0% {
        visibility:visible;
        opacity:1;
    }
}
@keyframes fade-in-out {
    0%,100% { opacity:0; }
    13%,83% { opacity:1; }
    13%,83% { transform:translateY(0); }
    0% { transform:translateY(3rem); }
    100% { transform:translateY(-2.5rem); }
}
@keyframes shake-bottom {
    0%,100% {
        transform:rotate(0deg);
        transform-origin:50% 100%;
    }
    10% { transform:rotate(3deg); }
    20%,40%,60% { transform:rotate(-5deg); }
    30%,50%,70% { transform:rotate(5deg); }
    80% { transform:rotate(-3deg); }
    90% { transform:rotate(3deg); }
}
@keyframes rolling {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}