@media (prefers-color-scheme: dark) {
    body {
        --color_a: #2d2d2d;
        --color_a7: #2d2d2dab;
        --color_a5: #2d2d2d80;
        --color_a3: #2d2d2d55;
        --color_b: #212121;
        --color_c: #181818;
        --text: #e8e8e8;
        --text7: #e8e8e8ab;
        --text5: #e8e8e880;
        --text3: #e8e8e855;
        --text_r: #2c2c2c;
        --text_r7: #2c2c2cab;
        --text_r5: #2c2c2c80;
        --text_r3: #2c2c2c55;
        --label: #007bff;
        --theme_r: #3ebbff;
        --body-bg: #0d213b;
    }

    .filter_r {
        filter: invert(1);
    }
}

@media (prefers-color-scheme: light) {
    body {
        --color_a: #ffffff;
        --color_a7: #ffffffab;
        --color_a5: #ffffff80;
        --color_a3: #ffffff55;
        --color_b: #ececec;
        --color_c: #cecece;
        --text: #3d3d3d;
        --text7: #3d3d3dab;
        --text5: #3d3d3d80;
        --text3: #3d3d3d55;
        --text_r: #e8e8e8;
        --text_r7: #e8e8e8ab;
        --text_r5: #e8e8e880;
        --text_r3: #e8e8e855;
        --label: #57a8ff;
        --theme_r: #1f8bff;
        --body-bg: #8c8c8c;
    }
}

:root {
    color-scheme: light dark;
}

:focus-visible {
    outline-offset: -1px;
    outline: var(--text) solid 1px;
}

#baseline-warning {
    display: none;
}

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    --container_w: 76em;
    --theme: #FF8403;
    --theme_bg: #191313;
    --red: #ad0000;
    --green: #00ad00;
    --gap: 0.6rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(var(--color_a), var(--body-bg));
    margin: 0;
    z-index: 0;
    color: var(--text);
    min-height: 100vh;
}

body > .container {
    margin: 90px 0 1em 0;
    padding: 2em;
    border-radius: 0.5em;
    flex-grow: 1;
}

body > img {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: -1;
    left: 0;
    mask: linear-gradient(#fffa, #0000);
}

svg {
    fill: var(--text)
}

header {
    display: flex;
    width: 100%;
    position: fixed;
    top: 0;
    justify-content: center;
    align-items: center;
    height: 90px;
    background: rgba(25 19 19 /var(--bgo));
    transition: height 0.2s ease, opacity 0.2s ease;
    z-index: 100;
}

header .container {
    display: flex;
    align-items: center;
    height: calc(100% - 20px);
    max-width: calc(var(--container_w) + 5em);
}

header .logo {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

header .logo .ico, header .logo a {
    height: 100%;
}

header .logo > .text {
    padding: 3% 2em;
    height: 40%;
    box-sizing: content-box;
}


header .tab * {
    padding: 0 1em;
}

header .user {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}

header a {
    color: var(--theme);
    font-weight: bolder;
}

header a:hover {
    color: var(--theme_r);
}

header input {
    display: none;
}

header .menu_btn, header .menu_btn label, header .menu_btn img {
    height: 100%;
}


header .menu {
    position: absolute;
    background: var(--theme_bg);
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    opacity: 0.95;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

header input:checked ~ .menu {
    max-height: 10em;
}


header .menu a {
    padding: 0.5em;
}

footer {
    background: #000000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffffff;
    position: relative;
}

footer img {
    width: 100%;
    max-width: 70em;
}

footer .t {
    position: absolute;
    bottom: 0;
    padding-bottom: 0.5em;
}

dialog {
    z-index: 200;
    margin: auto;
    padding: 2em;
    border: 0;
    border-radius: 1em;
}

dialog::backdrop {
    background-color: #0008;
}

a {
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
    color: var(--text);
}


input, select, button, .btn {
    font-size: 1em;
    border: none;
    padding: 0.2em 1.1em;
    border-radius: 1em;
    background: var(--text7);
    color: var(--text_r);
    transition: background 0.2s ease, border 0.2s ease;
}

input[type=submit], input[type=button], .btn, button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    backdrop-filter: contrast(0.8);
}

.btn > svg {
    height: 1em;
}

.tox .tox-collection__item-label {
    word-break: keep-all !important;
}

.tox button {
    backdrop-filter: none;
}

input[type=submit]:hover, input[type=button]:hover, .btn:hover, button:hover {
    background: var(--text_r3);
}

button:disabled {
    background: var(--text3);
}

@media (prefers-color-scheme: light) {
    input, select, button, .btn {
        background: var(--color_a7);
        color: var(--text);
        box-shadow: var(--text3) 0 0 4px 0;
    }

    input[type=submit]:hover, input[type=button]:hover, .btn:hover, button:hover {
        background: var(--color_b);
    }

    button:disabled {
        background: var(--text3);
    }
}

table {
    border-collapse: collapse;
    border: 2px solid var(--color_c);
}

thead {
    background: var(--color_b);
}

th, td {
    border: 1px solid var(--color_c);
    text-align: center;
    padding: 0.2em;
}

hr {
    border: solid var(--theme_r);
    border-width: 1px 0 0 0;
    opacity: 0.5;
    margin-top: 0.2em;
}

img {
    object-fit: cover;
    max-width: 100%;
}

textarea {
    resize: none;
    padding: 0.5em;
    border-radius: 0.5em;
    border: 1px solid var(--color_c);
    min-height: 3em;
    max-height: 10em;
    font-size: 1.2em;
    max-width: 100%;
}

.container {
    max-width: var(--container_w);
    width: 100%;
    padding: 0 2em;
    position: relative;
}

.content {
    display: flow-root;
}

.hd {
    display: none !important;
}

.h100 {
    height: 100%;
}

.sticky {
    position: sticky;
    top: calc(60px);
    z-index: 50;
}

.relative {
    position: relative;
}

.bg {
    background: var(--color_a);
}

.d_content {
    display: contents;
}

.f40 {
    display: none;
}

.f, .fc {
    display: flex;
    flex-wrap: wrap;
}

.inline {
    display: inline-flex !important;
}

.fc {
    flex-direction: column;
}

.ac {
    align-items: center;
}

.as {
    align-items: flex-start;
}

.jc {
    justify-content: center;
}

.je {
    justify-content: flex-end;
}

.nw {
    white-space: nowrap;
    flex-wrap: nowrap;
}

.ow {
    overflow-wrap: anywhere;
    white-space: wrap;
}

.oh {
    overflow: hidden;
}

.oa {
    overflow: auto
}

.mr02 {
    margin-right: 0.2em
}

.a_shd {
    box-shadow: var(--color_a) 2px 2px 3px 1px;
}

.a5_shd {
    box-shadow: var(--color_a5) 2px 2px 3px 1px;
}

.a7_shd {
    box-shadow: var(--color_a7) 2px 2px 3px 1px;
}

.a_box, .a7_box, .a5_box, .b_box, .c_box, .r_box {
    border-radius: 0.3em;
    padding: 0.2em 0.3em;
    display: flex;
}

.a_box {
    background: var(--color_a);
}

.a5_box {
    background: var(--color_a5);
}

.a7_box {
    background: var(--color_a7);
}

.b_box {
    background: var(--color_b);
}

.c_box {
    background: var(--color_c);
}

.r_box {
    background: var(--text);
    color: var(--text_r);
}

.tag {
    display: flex;
    border-radius: 1em;
    padding: 0.2em 0.7em;
    align-items: center;
    margin: 0 1em;
    color: #fff;
    white-space: nowrap;
}

.gap_t {
    margin-top: var(--gap);
}

.gap_t2 {
    margin-top: calc(var(--gap) * 2);
}

.gap_t3 {
    margin-top: calc(var(--gap) * 3);
}

.gap_t4 {
    margin-top: calc(var(--gap) * 4);
}

.gap_r {
    margin-right: var(--gap);
}

.gap_l {
    margin-left: var(--gap);
}

.gap_l2 {
    margin-left: calc(var(--gap) * 2);
}

.gap_l3 {
    margin-left: calc(var(--gap) * 3);
}

.gap_l4 {
    margin-left: calc(var(--gap) * 4);
}

.gap_x {
    margin-left: var(--gap);
    margin-right: var(--gap);
}

.gap_x2 {
    margin-left: calc(var(--gap) * 2);
    margin-right: calc(var(--gap) * 2);
}

.gap_x3 {
    margin-left: calc(var(--gap) * 3);
    margin-right: calc(var(--gap) * 3);
}

.gap_x4 {
    margin-left: calc(var(--gap) * 4);
    margin-right: calc(var(--gap) * 4);
}

.gap_x5 {
    margin-left: calc(var(--gap) * 5);
    margin-right: calc(var(--gap) * 5);
}

.gap_b {
    margin-bottom: var(--gap);
}

.gap_cx > *, .gap_cxh > * {
    margin-left: calc(var(--gap) / 2);
    margin-right: calc(var(--gap) / 2);
}

.gap_c > *, .gap_ch > * {
    margin: calc(var(--gap) / 2);
}

.gap_c > *:first-child, .gap_cx > *:first-child {
    margin-left: 0;
}

.gap_c > *:last-child, .gap_cx > *:last-child {
    margin-right: 0;
}

.pad {
    padding: var(--gap);
}

.pad_2 {
    padding: calc(var(--gap) / 2);
}

.w100 {
    width: 100%;
}

.label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
}

.red {
    color: var(--red);
}

.green {
    color: var(--green);
}

.theme {
    color: var(--theme)
}

.theme_r {
    color: var(--theme_r)
}

.spoiler {
    background: var(--text);
    transition: background-color 0.2s ease;
}

.spoiler:hover {
    background: #0000;
}

.wb_bg {
    background: var(--theme_r);
}

.sb_bg {
    background: var(--theme);
}

.ds_bg {
    background: var(--green);
}

.red_bg {
    background: var(--red);
}

.wb_br {
    border-color: var(--theme_r);
}

.op7 {
    opacity: 0.7;
}

.op5 {
    opacity: 0.5;
}

.ophover {
    transition: opacity 0.2s ease;
}

.ophover:hover {
    opacity: 0.7;
}

.fss {
    font-size: 0.9em;
}


.b {
    font-weight: bold;
}


.g1 {
    display: grid;
    grid-template-columns: 1fr;
}

.ff {
    flex: 1 1 0
}

.bb {
    border-bottom: 1px var(--color_b) solid;
}

.toggle label {
    display: flex;
    align-items: center;
}

.toggle label svg {
    width: 1em;
}

.toggle input, .grid_col input {
    display: none;
}

.toggle input:checked + label {
    display: none;
}

.cbhd input[type=checkbox], .cbhd input[type=radio] {
    display: none;
}

.cbhd label, .cbhd span:not(.label) {
    padding: 0.3em 1.1em;
    border-radius: 2em;
    margin: 0 calc(var(--gap) * 0.6) var(--gap) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--text3);
    color: var(--text);
    transition: all 0.2s ease;
    backdrop-filter: contrast(0.8);
}

.cbhd input:checked + label {
    background: var(--text7);
    font-weight: bold;
    color: var(--text_r);
}

.cbhd label:hover {
    background: var(--text5);
}

.cbhd span:not(.label) {
    border: var(--text7) 1px solid;
    padding: calc(0.3em - 1px) calc(1.1em - 1px);
}

.cbhd .toggle label {
    background: var(--text7);
}

.cbhd span:not(.label):hover {
    background: var(--text5);
}

.cbhd span:not(.label):active {
    background: var(--text_r);
}

@media (prefers-color-scheme: light) {
    .cbhd label, .cbhd span:not(.label) {
        color: var(--text_r);
    }

    .cbhd span:not(.label):active {
        background: var(--text7);
    }
}


.filter .label {
    padding: 0.2em;
    font-size: small;
}

.filter .slash {
    display: block;
    height: calc(100% - var(--gap));
    margin-right: 0.2em;
    margin-left: calc(0.2em - var(--gap));
    width: 2px;
    background: var(--text);
    transform: skew(-10deg);
}

.filter input, .filter select {
    margin-bottom: var(--gap);
}

.filter input[type=text], .filter input[type=number], .filter select {
    min-width: 0;
}

.filter .process {
    margin-bottom: var(--gap);
}

.filter .ico_box > input {
    margin-bottom: 0;
}


.fold > div {
    display: flex;
    position: relative;
    overflow: hidden;
}

.fold .choice {
    display: flex;
    opacity: 0;
}

.fold .choice:has(span) {
    opacity: 1;
    cursor: default;
}

.fold > .choice {
    display: contents;
}

.fold > div:hover, .fold > div:has(input:checked) {
    display: contents;
}

.fold > div:hover .choice, .fold > div:has(input:checked) .choice {
    opacity: 1;
}

.fold .choice:nth-child(n+3) {
    transition: opacity 0.2s ease;
}

.fold .choice:nth-child(3) {
    transition-delay: 0.05s;
}

.fold .choice:nth-child(4) {
    transition-delay: 0.1s;
}

.fold .choice:nth-child(5) {
    transition-delay: 0.15s;
}

.fold .choice:nth-child(6) {
    transition-delay: 0.2s;
}

.fold .choice:nth-child(7) {
    transition-delay: 0.25s;
}

.fold .choice:nth-child(8) {
    transition-delay: 0.3s;
}

.fold .choice:nth-child(9) {
    transition-delay: 0.35s;
}

.fold .choice:nth-child(10) {
    transition-delay: 0.4s;
}

.fold .choice:nth-child(11) {
    transition-delay: 0.45s;
}

.fold .choice:nth-child(12) {
    transition-delay: 0.5s;
}


.switch_box {
    display: grid;
    grid-template-columns: auto 0fr 0fr;
    transition: grid-template-columns 0.2s ease;

    & > .label {
        display: none;
    }

    & + input[type=submit] {
        margin: 3px 0 calc(var(--gap) + 3px) 0;
    }

    & > div:not(.switch) {
        overflow: hidden;
        flex-wrap: nowrap;
        padding: 3px min(3px, 100%);
        min-width: 0;
    }

    &:has(.a:checked) {
        grid-template-columns: auto 1fr 0fr;
    }

    &:has(.b:checked) {
        grid-template-columns: auto 0fr 1fr;
    }
}

.switch {
    margin: 3px var(--gap) calc(var(--gap) + 3px) 0;
    background: var(--text3);
    border-radius: 1em;

    & > label {
        margin: 0;
        border: none;
        box-shadow: none;
        background: none;
        backdrop-filter: none;
    }

    & > input:checked + label {
        box-shadow: inset var(--text) 0 0 2px 0;
    }

    & > label:nth-of-type(1) {
        margin-right: -0.6em;
    }
}


.process {
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    .arrow {
        height: 2em;
    }
}

.ico_box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

.ico_box input {
    padding: 0 0.3em 0 2.8em;
}

.ico_box .ico {
    aspect-ratio: 1/1;
    object-fit: cover;
    image-rendering: pixelated;
    position: absolute;
    height: 2em;
    margin-left: var(--gap);
}

.arrow {
    height: 1.6em;
}


.jsb {
    justify-content: space-between;
}

.jsa {
    justify-content: space-around;
}

.text_r {
    color: var(--text_r);
}

.text_theme {
    color: var(--theme);
}

.text_theme_r {
    color: var(--theme_r);
}

.sort {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 0.3em;
}

.grid_col label {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}

.grid_col label svg {
    height: 1.6em;
    transition: fill 0.2s ease;
}

.grid_col input:checked + label svg, .grid_col label:hover svg {
    fill: var(--theme);
}

.login {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: large;
    font-weight: bolder;

    & > div {
        display: grid;
        grid-template-columns: 20em 20em;
        border-radius: 1em;
        overflow: hidden;


        & > div {
            background: var(--theme_bg);
            display: flex;
            justify-content: center;
            align-items: center;

            & > img {
                width: 80%;
                object-fit: contain;
            }
        }

        form {
            width: 20em;
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 1em;
            padding: 2em;
            background: var(--color_a);

            img {
                width: 70%;
            }

            div {
                display: grid;
                grid-template-columns: 1fr;
            }

            .error {
                color: var(--red);
            }

            input {
                font-size: large;
                font-weight: bold;
                border-width: 2px;
                border-style: solid;
                border-radius: 5px;
                padding: 0.2em;
            }

            ul {
                font-size: small;
                font-weight: bold;
                margin: 0;
                padding-inline-start: 25px;
                color: var(--red);
            }
        }
    }
}

@media screen and (max-width: 40em) {
    .login > div {
        grid-template-columns: 1fr;

        & > div {
            display: none;
        }
    }

}

.space {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.space div {
    display: flex;
}

.space input {
    width: 100%;
}

.function {
    display: flex;
}

.function #function_tree {
    display: flex;
}

.function #function_tree span {
    position: relative;
    transition: border-color 0.2s ease;
    cursor: default;
    background: var(--text3);
    border-color: #0000;
}

.function #function_tree span:after {
    content: "🞭";
    position: absolute;
    right: 0.2em;
    color: var(--red);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.function #function_tree span:hover {
    border-color: var(--red);
}

.function #function_tree span:hover:after {
    opacity: 1;
}

.tab_container > .tab {
    display: grid;
    grid-template-columns: repeat(auto-fit, 4em);
    grid-gap: 0.5em;
    font-weight: bold;
}


.tab_container > .tab a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5em 0;
    outline-offset: 0;
    outline: none;
    position: relative;
    opacity: 0.5;
    scroll-margin-top: 100vh;
}

.tab_container > .tab a:hover {
    opacity: 1;
}

.tab_container > .tab a:after {
    content: "";
    width: 1em;
    height: 0.2em;
    border-radius: 0.2em;
    background: #0000;
    position: absolute;
    bottom: 0;
    transition: background-color 0.2s ease;
}

.tab_container > .tab a:target {
    opacity: 1;
}

.tab_container > .tab a:target:after {
    background: var(--theme_r);
}

.tab_container > .content {
    padding-top: 1em;
    position: relative;
    z-index: 12;
    border-top: 1px var(--color_a5) solid;

    & > div {
        display: none;
    }

    h2 {
        display: none;
    }
}

.tab_container:has(#tab1:target) #content1 {
    display: block;
}

.tab_container:has(#tab2:target) #content2 {
    display: block;
}

.tab_container:has(#tab3:target) #content3 {
    display: block;
}

.tab_container:has(#tab4:target) #content4 {
    display: block;
}

.tab_container:has(#tab5:target) #content5 {
    display: block;
}

.rl37 {
    display: grid;
    grid-template-columns: 15em 1fr;
    position: relative;

    .r {
        z-index: 10;
        background-color: var(--text3);
        padding: var(--gap);
        border-radius: 0.5em;

        .btn {
            display: none;
        }
    }

    .l {
        z-index: 9;
        padding: 0 var(--gap);
    }
}

@media screen and (max-width: 40em) {
    .rl37 {
        display: flex;
        overflow: hidden;

        .r, .l {
            width: 100%;
            flex-shrink: 0;
            transition: transform 0.5s ease;

            .btn {
                display: flex;
                transition: transform 0.5s ease;

                svg {
                    transition: transform 0.5s ease;
                }
            }
        }

        #search_msg {
            padding-left: 3em;
        }


        &:has(#left_bar:checked) {
            .r, .l {
                transform: translateX(-100%);
            }

            .r .btn {
                transform: translateX(calc(100% + 1em));

                svg {
                    transform: rotate(180deg);
                }
            }
        }
    }
}

.tree {
    input {
        display: none;
    }

    div {
        display: grid;
        border-radius: 0.5em;
        background: var(--color_a3);
        grid-template-rows: auto 0fr;
        overflow: hidden;
        transition: grid 0.5s;
        margin-bottom: 2px;
    }

    div:has(input:checked), div:has(label:hover), div:hover {
        grid-template-rows: auto 1fr;
    }

    div:has(>input:checked) {
        background: var(--color_a7);
    }

    label {
        font-weight: bold;
        padding: 0.5em;

        &:has(+div) {
            padding-bottom: 0;
        }

        & + div {
            margin: 0 0.5em 0.5em;
            background: none;
            display: block;
        }
    }
}

.list_result {
    border-radius: 0.5em;
    box-shadow: 1px 1px 3px 1px #0004;
    background: var(--color_a5);
    display: grid;
    grid-template-columns: 13.4em 1fr auto 11em;
    grid-template-rows: auto auto auto auto 1fr 2em;
    white-space: nowrap;

    .cover {
        grid-area: 1/1/6/2;
        width: 100%;
        aspect-ratio: 4/3;
        overflow: hidden;
        border-radius: 0.5em 0 0 0;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .title {
        grid-area: 1/2/1/4;
        margin: 0.6rem 0.6rem 0 0.6rem;
        color: var(--theme);
    }

    .time {
        grid-area: 1/4/1/5;
        margin: 0 0.6rem 0 0;
        align-self: end;
        padding: 0.1em;
    }

    .author {
        grid-area: 2/2/2/4;
        margin: 0 0.6rem;
        padding: 0.1em;
    }

    .size {
        grid-area: 2/4/2/5;
        margin: 0 0.6rem 0 0;
        padding: 0.1em;
        overflow: hidden;
    }

    .desc {
        grid-area: 3/2/6/4;
        max-height: 4em;
        overflow: hidden;
        margin: 0 0.6rem 0.6rem 0.6rem;
        padding: 0.1em;
    }

    .stress {
        grid-area: 3/4/3/5;
        padding: 0.1em;
        margin: 0 0.6rem 0 0;
        overflow: hidden;
    }

    .version {
        grid-area: 4/4/4/5;
        padding: 0.1em;
    }

    .download {
        grid-area: 5/4/5/5;
        padding: 0.1em;
        margin: 0 0.6rem 0 0;
        overflow: hidden;
    }

    .io {
        grid-area: 6/1/6/3;
        display: flex;
        background: var(--color_a5);
        padding: 0.2em 0.2em 0.2em 0.6em;
        border-radius: 0 0 0 0.5em;
        overflow: hidden;

        & > div {
            margin: 0 0.2em;

            img {
                height: 1.6em;
                width: 1.6em;
            }
        }

        .tag {
            margin: 0 0.2em;
        }
    }

    .function {
        width: fit-content;
        min-width: 11em;
        grid-area: 6/3/6/5;
        background: var(--color_a5);
        align-items: center;
        justify-content: flex-end;
        padding: 0 0.6em;
        border-radius: 0 0 0.5em 0;
    }

}

.list #results {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
}

.list:has(#grid_col_2:checked) #results {
    grid-template-columns: 1fr 1fr;


    .list_result {
        grid-template-columns: 8em 1fr auto;
        grid-template-rows: auto auto auto 2em;

        .cover {
            grid-area: 1/1/4/2;
        }

        .title {
            font-size: large;
        }

        .desc {
            display: none;
        }

        .size {
            display: none;
        }

        .download {
            display: none;
        }

        .stress {
            display: none;
        }

        .time {
            display: none;
        }

        .author {
            grid-area: 2/2/2/4;
        }

        .version {
            grid-area: 3/2/3/4;
            margin: 0 0.6rem 0.6em;
        }

        .io {
            grid-area: 4/1/4/3;

            .ico_tag > div > div {
                display: none;
            }
        }

        .function {
            grid-area: 4/3/4/4;
            min-width: initial;
        }
    }

    .pagination {
        grid-column: 1/3;
    }
}

@media screen and (max-width: 60em) {
    #results {
        grid-template-columns: 1fr;

        .list_result {
            grid-template-columns: 8em 1fr auto;
            grid-template-rows: auto auto auto 2em;

            .cover {
                grid-area: 1/1/4/2;
            }

            .title {
                font-size: large;
            }

            .desc {
                display: none;
            }

            .size {
                display: none;
            }

            .download {
                display: none;
            }

            .stress {
                display: none;
            }

            .time {
                display: none;
            }

            .author {
                grid-area: 2/2/2/4;
            }

            .version {
                grid-area: 3/2/3/4;
                margin: 0 0.6rem 0.6em;
            }

            .io {
                grid-area: 4/1/4/3;

                .ico_tag > div > div {
                    display: none;
                }
            }

            .function {
                grid-area: 4/3/4/4;
                min-width: initial;
                width: 100%;
                overflow: hidden;

                span {
                    width: 100%;
                    overflow: hidden;
                    justify-content: end;
                }
            }
        }
    }

    .list:has(#grid_col_2:checked) #results {
        grid-template-columns: 1fr 1fr;


        .list_result {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto;

            .cover {
                grid-area: 1/1/3/3;
                border-radius: 0.5em 0.5em 0 0;
            }

            .title {
                font-size: large;
                grid-area: 3/1/3/2;
                margin: 0 0.6em;
            }

            .author {
                grid-area: 4/1/4/2;
                font-weight: initial;
            }

            .version {
                grid-area: 2/1/2/2;
                margin: 0.2em;
            }

            .io {
                display: none;
            }

            .function {
                display: none;
            }
        }
    }
}

.tip_box {
    display: flex;
    position: relative;
    flex-shrink: 0;
}

.tip_box .h {
    background: var(--text);
    color: var(--text_r);
    font-size: 0.5em;
    border-radius: 0.4em;
    padding: 0 0.2em;
    display: flex;
    align-items: center;
    align-self: center;
    margin-left: 0.5em;
    transition: opacity 0.2s ease;
}

.tip_box:hover .h {
    opacity: 0.8;
}

.tip_box .tip {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    background: var(--text);
    color: var(--text_r);
    padding: 0.5em;
    border-radius: 0.5em;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tip_box:hover .tip {
    visibility: visible;
    opacity: 1;
}

.ico_tag {
    display: flex;
    flex-shrink: 0;
    white-space: nowrap;
    image-rendering: pixelated;
}

.ico_tag > div {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 0.3em;
    position: relative;
    background: var(--color_c);
    padding: 0.1em;
    max-height: 50px;
}

.ico_tag img, .ico_tag canvas {
    border-radius: 0.3em;
    height: calc(50px - 0.2em);
}

.ico_tag span {
    align-self: flex-start;
    display: flex;
    font-size: 0.7em;
    background: var(--text);
    color: var(--text_r);
    padding: 0 0.5em;
    border-radius: 1em;
    transform: translate(-1.1em, -0.2em);
    margin-right: -1.1em;
}

.ico_tag > div > div {
    padding-right: 0.7em;
}

.dropdown input[type=checkbox] {
    display: none;
}


.dropdown {
    border-radius: 0.3em;
    transition: background-color 0.2s ease;
}

.dropdown:hover {
    background: var(--color_a5);
}

.dropdown_body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    background: none;
    border-radius: 0 0 0.3em 0.3em;
    transition: all 0.2s ease;
}

.dropdown_body > * {
    min-height: 0;
}

.dropdown:has(input:checked) {
    background: var(--color_a5);
    border-radius: 0.3em 0.3em 0 0;
}

.dropdown:has(input:checked) + .dropdown_body {
    grid-template-rows: 1fr;
    background: var(--color_a5);
}

.dropdown_search {
    z-index: 50;
    position: absolute;
    background: var(--color_a);
    width: calc(100% - 1em);
    border-radius: 0.3em;
    min-height: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 2em;
    opacity: 0;
    transition: padding 0.2s ease, max-height 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
}

.dropdown_search.show {
    padding: 2em;
    max-height: 60vh;
    box-shadow: var(--text3) 0 0 3px 3px;
    opacity: 1;
    overflow: visible;
}

.dropdown_search:before {
    content: '';
    background: var(--color_a);
    position: absolute;
    top: 0;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    transform: translateY(-10px) rotate(45deg);
}

.dropdown_search .ico_tag {
    height: 50px;

    img {
        height: calc(50px - 0.2em);
    }
}

.link_result {
    border-radius: 0.5em;
    box-shadow: 1px 1px 3px 1px #0004;
    background: var(--color_a5);
    display: flex;
    height: 5em;
    min-width: 15em;
    position: relative;
}

.link_result .cover {
    height: 100%;
    border-radius: 0.5em 0 0 0.5em;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.link_result .content {
    margin: calc(var(--gap) / 2);
}

.link_result img {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

.pagination {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    overflow: hidden;

    .page {
        --page: 0px;
        display: flex;
        overflow: hidden;

        button {
            transform: translateX(calc(var(--page) * -1px));
            transition: transform 0.2s ease;
        }
    }

    .prev {
        margin-right: var(--gap);
    }

    .next {
        margin-left: var(--gap);
    }
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10em;

    img {
        height: 100%;
    }
}

#loading {
    background: none;
    outline: none;
    outline-offset: 0;
    width: 20em;
    height: 20em;
    overflow: hidden;

    img {
        width: 100%;
    }
}

dialog:has(.tabu_table) {
    width: 60em;
}

dialog .tabu_table {
    width: 60rem;
    max-width: 100%;
    height: 30em;
}

.has_loading:has(*) + .loading {
    display: none;
}

@media screen and (max-width: 30em) {
    .hd30 {
        display: none;
    }
}

@media screen and (max-width: 40em) {
    .hd40 {
        display: none !important;
    }

    .fc40 {
        flex-direction: column;
    }

    .gap_l_40 {
        margin-left: var(--gap);
    }


    .gap_x_40 {
        margin-left: var(--gap);
        margin-right: var(--gap);
    }

    .gap_x2_40 {
        margin-left: calc(var(--gap) * 2);
        margin-right: calc(var(--gap) * 2);
    }

    .gap_x3_40 {
        margin-left: calc(var(--gap) * 3);
        margin-right: calc(var(--gap) * 3);
    }

    .gap_x4_40 {
        margin-left: calc(var(--gap) * 4);
        margin-right: calc(var(--gap) * 4);
    }

    .space {
        grid-template-columns: 1fr;
    }

    .no_gap40 {
        margin: 0;
    }

    .f40 {
        display: flex;
    }

    body > .container {
        padding: 0.5em;
        margin-top: calc(90px + 0.5em);
    }
}


@media screen and (max-width: 50em) {
    .hd50 {
        display: none;
    }
}