/* One fixed background and one glass mask cover the full document. */
html[data-yume-glass] body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: transparent !important;
}

html[data-yume-glass] body::before,
html[data-yume-glass] body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

html[data-yume-glass] body::before {
    z-index: -3;
    background: #23252b var(--yume-background-image) center / cover no-repeat;
}

html[data-yume-glass] body::after {
    z-index: -2;
    background: var(--yume-mask);
    -webkit-backdrop-filter: blur(var(--yume-blur));
    backdrop-filter: blur(var(--yume-blur));
    transition: background-color .2s ease;
}

/* Let the same full-page image show through the existing hero and footer. */
html[data-yume-glass] body .body-background,
html[data-yume-glass] body .kizumi_header_banner_waves {
    display: none !important;
}

html[data-yume-glass] body .kizumi_header_banner,
html[data-yume-glass] body .kizumi_header_banner_img::before,
html[data-yume-glass] body .kizumi_header_banner_img::after,
html[data-yume-glass] body .kizumi-container,
html[data-yume-glass] body footer {
    background: transparent !important;
}

html[data-yume-glass] body .kizumi_header_banner_img > img {
    visibility: hidden;
}

/* Main reading surfaces have a single tint, without an opaque nested layer. */
html[data-yume-glass] body .list-one.post-list:not(.blog-border):not(.blog-shadow):not(.blog-lines),
html[data-yume-glass] body .blog-single:not(.blog-border):not(.blog-shadow):not(.blog-lines),
html[data-yume-glass] body .blog-sidebar .widget:not(.blog-border):not(.blog-shadow):not(.blog-lines),
html[data-yume-glass] body .list-one.post-list,
html[data-yume-glass] body .list-two.post-list,
html[data-yume-glass] body .blog-single,
html[data-yume-glass] body .blog-sidebar .widget,
html[data-yume-glass] body .recommended-category,
html[data-yume-glass] body .special-category,
html[data-yume-glass] body .software-category,
html[data-yume-glass] body .software-card {
    background: var(--yume-surface) !important;
    background-image: none !important;
}

html[data-yume-glass] body .blog-single .post-single:not(.blog-border):not(.blog-shadow):not(.blog-lines),
html[data-yume-glass] body .blog-sidebar .widget:not(.blog-border):not(.blog-shadow):not(.blog-lines) .widget-title,
html[data-yume-glass] body .blog-single .post-single,
html[data-yume-glass] body .blog-single .single-content,
html[data-yume-glass] body .blog-single .post-comments,
html[data-yume-glass] body .blog-sidebar .widget .widget-title,
html[data-yume-glass] body .post-list .post-list-content {
    background: transparent !important;
}

html[data-yume-glass] body .blog-border::after {
    background: var(--yume-underlay) !important;
}

html[data-yume-glass] body .kizumi_header .navbar.scrolled,
html[data-yume-glass] body .kizumi_header .dropdown-menu,
html[data-yume-glass] body .blog-sidebar .offcanvas-lg.show,
html[data-yume-glass] body .post-toc,
html[data-yume-glass] body .post-user-info-panel,
html[data-yume-glass] body .mobile-user-panel {
    background: var(--yume-surface-strong) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(var(--yume-blur));
    backdrop-filter: blur(var(--yume-blur));
}

@media (min-width: 992px) {
    html body .kizumi_header .offcanvas-nav {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (max-width: 991.98px) {
    html body .kizumi_header .offcanvas {
        background: var(--yume-surface-strong, var(--bs-body-bg)) !important;
        background-image: none !important;
        -webkit-backdrop-filter: blur(var(--yume-blur));
        backdrop-filter: blur(var(--yume-blur));
    }

    html body .kizumi_header .navbar > .container {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 84px;
        column-gap: 8px;
        align-items: center;
        min-height: 56px;
        padding-inline: 12px;
    }

    html body .kizumi_header .navbar-toggler {
        display: none !important;
    }

    html body .kizumi_header .navbar-brand {
        grid-column: 1;
        grid-row: 1;
        position: static !important;
        left: auto;
        transform: none !important;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
        font-size: clamp(13px, 3.6vw, 18px);
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html body .kizumi_header .navbar-brand img {
        max-width: 100%;
        max-height: 40px;
        object-fit: contain;
    }

    html body .kizumi_header .navbar > .container > .d-flex.d-lg-none {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        width: 84px;
        min-width: 0;
        gap: 4px;
    }

    html body .kizumi_header .mobile-search-form {
        position: static;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin: 0;
    }

    html body .kizumi_header .mobile-search-btn,
    html body .kizumi_header .mobile-user-btn {
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin: 0 !important;
        padding: 0;
        transform: none;
    }

    html body .kizumi_header .mobile-search-input,
    html body .kizumi_header .mobile-search-form.active .mobile-search-input {
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        width: calc(100% - 24px);
        height: 44px;
        box-sizing: border-box;
        padding: 0 14px;
        background: var(--yume-surface-strong, var(--bs-body-bg)) !important;
        border: 1px solid var(--bs-hui, #888);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: 2;
    }

    html body .kizumi_header .mobile-search-form.active .mobile-search-input {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

/* The original GIF already has alpha; keep its animated transparent edges. */
html body .floating-menu-items,
html body #lolijump,
html body #lolijump img {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body .single-content img {
    max-width: 100%;
}

/* Keep blog text consistent while preserving icon and code font faces. */
html body,
html body :not(i):not(svg):not(code):not(pre):not(.fa):not(.fas):not(.far):not(.fab):not(.glyphicon):not(.dashicons):not(.material-icons):not(.iconfont):not([class^="icon-"]):not([class*=" icon-"]) {
    font-family: "Microsoft YaHei Light", "微软雅黑 Light", "Microsoft YaHei", "微软雅黑", sans-serif !important;
}

@media print {
    html[data-yume-glass] body::before,
    html[data-yume-glass] body::after {
        content: none;
    }
    html body .post-single {
        background: white !important;
    }
}