:root {
    --top-nav-bg: #0e0e0e;
    --top-nav-text: #fff;
    --top-nav-hover: #fc6;
    --top-menu-subs-item-text: var(--gray-100);
    --top-menu-subs-item-text-hover: var(--gray-100);
    --top-menu-subs-bg: #D45C1C;
    --top-menu-subs-item-bg-hover: #165;
    --top-language-bg: var(--gray-200);
    --top-language-hover-bg: var(--gray-50);
    --top-language-text: var(--gray-700);
    --top-language-hover: var(--gray-700);
    --top-language-checked: var(--gray-100);
    --top-language-checked-bg: var(--cyan-xchina);

    --breadcrumb-bg: #0e0e0e;
    --breadcrumb-text: #fff;
    --breadcrumb-hover: var(--cyan-xchina);

    --default-bg: #222;
    --default-text: #fff;
    --default-split: var(--gray-600);

    --bar-mobile-header-bg: var(--gray-200);
    --bar-mobile-header-text: var(--gray-600);
    --bar-mobile-bg: var(--white);
    --bar-mobile-text: var(--gray-600);
    --bar-mobile-split: var(--gray-200);
    --bar-mobile-subs-bg: var(--gray-50);
    --bar-mobile-subs-text: var(--gray-600);

    --item-bg: #1f2937;
    --item-shadow: rgba(0, 0, 0, 0.2);
    --item-shadow-hover: rgba(0, 0, 0, 0.5);
    --item-tag-bg: var(--orange-900);
    --item-tag-text: var(--gray-50);
    --item-text-color: var(--gray-600);
    --item-link-color: var(--default-text);
    --item-text-hover: var(--cyan-xchina);

    --comment-bg: var(--gray-800);
    --comment-nickname-text: var(--red-400);
    --comment-time-text: var(--gray-400);
    --comment-remark-border: var(--orange-xchina);
    --comment-remark-bg: var(--cyan-900);
    --comment-remark-text: var(--gray-300);
    --comment-misc-border: var(--orange-700);
    --comment-misc-bg: var(--cyan-900);
    --comment-misc-text: var(--gray-300);
    --comment-btn-text: var(--cyan-xchina);
    --comment-btn-text-hover: var(--gray-100);
    --comment-btn-bg: var(--cyan-900);
    --comment-btn-bg-hover: var(--cyan-800);

    --tab-container-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    --tab-nav-text: var(--gray-400);
    --tab-nav-text-hover: var(--gray-200);
    --tab-nav-text-checked: var(--white);
    --tab-nav-bg: var(--gray-800);
    --tab-nav-bg-hover: var(--gray-700);
    --tab-nav-bg-checked: var(--orange-800);
    --tab-nav-split: var(--gray-800);
    --tab-nav-split-checked: var(--orange-800);
    --tab-contents-bg: #0e0e0e;
    --tab-content-text: var(--gray-300);

    --modal-header-bg: var(--gray-700);
    --modal-header-text: var(--gray-300);
    --modal-body-bg: var(--gray-900);
    --modal-body-text: var(--gray-300);
    --modal-footer-bg: var(--gray-700);
    --modal-footer-text: var(--gray-300);
    --modal-line: var(--gray-500);

    --footer-bg: #111;
    --footer-text: var(--gray-300);
    --footer-hover: var(--cyan-500);

    --footer-mobile-bg: var(--gray-900);
    --footer-mobile-text: var(--gray-300);
    --footer-mobile-text-disabled: var(--gray-500);
    --footer-mobile-border: var(--gray-700);
    --footer-mobile-fav-text: var(--orange-xchina);

    --bar-mobile-header-bg: #222;
    --bar-mobile-header-text: var(--gray-100);
    --bar-mobile-bg: #111;
    --bar-mobile-text: var(--gray-200);
    --bar-mobile-split: var(--gray-800);
    --bar-mobile-subs-bg: #222;
    --bar-mobile-subs-text: var(--gray-200);

}

/* Mobile navigation state controlled by the delegated handler in foot.html. */
@media (max-width: 768px) {
    nav.mobile.active .overlay {
        display: block;
    }

    nav.mobile.active .toggle-bar {
        display: block;
        right: 0;
    }

    nav.mobile .toggle-bar .menu.active > .subs {
        display: block;
    }

    nav.mobile .toggle-bar .menu:has(> .subs) {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        height: auto;
    }

    nav.mobile .toggle-bar .menu:has(> .subs) > .subs {
        position: static;
        flex: 0 0 100%;
        width: 100%;
        order: 3;
    }
}

body {
    background-color: #000;
    background-image: none;
}

@media only screen and (max-width: 768px) {
    .layout-lr .left-1,
    .layout-lr .right-1 {
        display: none;
    }
}