@media screen and (min-width: 1101px) {
    #mobile-toggle-menu {
        display: none !important;
    }
}

@media screen and (max-width: 1100px) {
    #mobile-toggle-menu {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
}

@media screen and (max-width: 1100px) {
    #nav #blog_name,
    #nav #page-name-mask {
        display: none !important;
    }

    #nav {
        padding: 0 !important;
    }

    #nav-right {
        margin-left: auto;
    }

    #page-header #nav #nav-group {
        padding: 0 10px 0 max(2px, env(safe-area-inset-left, 0px)) !important;
    }

    #mobile-toggle-menu {
        display: flex;
        align-items: center;
        margin: 0 4px 0 0 !important;
        padding: 0 !important;
        transform: translateX(-6px);
    }

    #page-header #nav-right #toggle-menu {
        display: none !important;
    }

    #mobile-toggle-menu .site-page {
        width: 40px;
        height: 40px;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        box-shadow: none !important;
    }

    #mobile-toggle-menu .site-page i {
        font-size: 1.08rem;
        line-height: 1;
    }

    #page-header #nav #mobile-toggle-menu .site-page,
    #page-header #nav #nav-right #mobile-toggle-menu .site-page,
    #page-header #nav #nav-right #toggle-menu .site-page,
    #page-header #nav #nav-right #darkmode_button .site-page,
    #page-header #nav #nav-right #darkmode_button .console_switchbutton,
    #page-header #nav #nav-right #search-button .site-page,
    #page-header #nav #nav-right #randomPost_button .site-page {
        color: var(--heo-fontcolor) !important;
    }

    #page-header #nav #mobile-toggle-menu .site-page i,
    #page-header #nav #mobile-toggle-menu .site-page .haofont,
    #page-header #nav #mobile-toggle-menu .site-page svg,
    #page-header #nav #nav-right #mobile-toggle-menu .site-page i,
    #page-header #nav #nav-right #darkmode_button .hao-theme-toggle__icon,
    #page-header #nav #nav-right #darkmode_button .hao-theme-toggle__glyph,
    #page-header #nav #nav-right #darkmode_button .site-page i,
    #page-header #nav #nav-right #darkmode_button .site-page svg,
    #page-header #nav #nav-right #toggle-menu .site-page i,
    #page-header #nav #nav-right #search-button .site-page i,
    #page-header #nav #nav-right #randomPost_button .site-page i,
    #page-header #nav #nav-right #mobile-toggle-menu .site-page .haofont,
    #page-header #nav #nav-right #mobile-toggle-menu .site-page svg,
    #page-header #nav #nav-right #toggle-menu .site-page svg,
    #page-header #nav #nav-right #search-button .site-page svg,
    #page-header #nav #nav-right #randomPost_button .site-page svg {
        color: var(--heo-fontcolor) !important;
        fill: currentColor;
        stroke: currentColor;
    }

    #sidebar {
        --hao-mobile-menu-panel-bg: color-mix(in srgb, var(--heo-card-bg) 98%, #ffffff 2%);
        --hao-mobile-menu-soft-bg: transparent;
        --hao-mobile-menu-border: #d1d5db;
        --hao-mobile-menu-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
        --hao-mobile-menu-mask: rgba(15, 23, 42, 0.07);
        --hao-mobile-menu-text: var(--heo-fontcolor);
        --hao-mobile-menu-muted: var(--heo-secondtext);
        --hao-mobile-menu-section: #94a3b8;
        --hao-mobile-menu-hover: #f3f4f6;
        --hao-mobile-menu-active-bg: #f5bfd0;
        --hao-mobile-menu-active-text: #111827;
        --hao-mobile-menu-active-subtitle: #a96d85;
        position: fixed;
        inset: 0;
        background: transparent !important;
        z-index: 100200;
        pointer-events: none;
    }

    html[data-theme='dark'] #sidebar {
        --hao-mobile-menu-panel-bg: color-mix(in srgb, var(--heo-card-bg) 90%, #020617 10%);
        --hao-mobile-menu-soft-bg: transparent;
        --hao-mobile-menu-border: rgba(148, 163, 184, 0.18);
        --hao-mobile-menu-shadow: 0 18px 46px rgba(2, 6, 23, 0.32);
        --hao-mobile-menu-mask: rgba(2, 6, 23, 0.12);
        --hao-mobile-menu-section: #c4cad7;
        --hao-mobile-menu-hover: rgba(255, 255, 255, 0.06);
        --hao-mobile-menu-active-bg: #f5bfd0;
        --hao-mobile-menu-active-text: #111827;
        --hao-mobile-menu-active-subtitle: #9b4f6d;
    }

    #sidebar.hao-mobile-menu--open {
        pointer-events: auto;
    }

    #sidebar #menu-mask {
        position: fixed;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: var(--hao-mobile-menu-mask);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.34s;
    }

    #sidebar.hao-mobile-menu--open #menu-mask {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: min(76vw, 256px);
        max-width: calc(100vw - 96px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--hao-mobile-menu-border);
        border-left: 0;
        border-radius: 0 16px 16px 0;
        background: var(--hao-mobile-menu-panel-bg);
        box-shadow: var(--hao-mobile-menu-shadow);
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
        z-index: 100201;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu.open {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__header {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 4px 12px 6px;
        border-bottom: 1px solid var(--hao-mobile-menu-border);
        background: color-mix(in srgb, var(--hao-mobile-menu-panel-bg) 92%, transparent);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__brand .hao-site-nav__brand-link {
        padding: 10px 4px 8px;
        gap: 12px;
        border: 0;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__brand .hao-site-nav__brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: transparent;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__brand .hao-site-nav__brand-title {
        color: var(--hao-mobile-menu-text);
        font-size: 0.9rem;
        font-weight: 700;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__brand .hao-site-nav__brand-subtitle {
        color: var(--hao-mobile-menu-muted);
        font-size: 0.68rem;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__panel-title {
        margin: 0;
        color: var(--hao-mobile-menu-text);
        font-size: 0.92rem;
        font-weight: 700;
        line-height: 1.2;
        flex: 1 1 auto;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__close {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--hao-mobile-menu-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0;
        margin-top: -5px;
        align-self: flex-start;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__close i {
        font-size: 0.88rem;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 2px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(60, 60, 67, 0.28) transparent;
        overscroll-behavior: contain;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__content::-webkit-scrollbar {
        width: 5px;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__content::-webkit-scrollbar-track {
        background: transparent;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__content::-webkit-scrollbar-thumb {
        background: rgba(60, 60, 67, 0.22);
        border-radius: 999px;
        border: 1px solid transparent;
        background-clip: padding-box;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-grid-menu__content::-webkit-scrollbar-thumb:hover {
        background: rgba(60, 60, 67, 0.34);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__sections {
        gap: 0;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__section {
        padding-top: 0;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__section + .hao-site-nav__section {
        padding-top: 0;
        border-top: 1px solid var(--hao-mobile-menu-border);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__section-header {
        margin-bottom: 0;
        padding: 9px 10px 7px;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__section-title {
        color: var(--hao-mobile-menu-section);
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__section-desc {
        display: none;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__section-list {
        gap: 2px;
        padding: 0 10px 11px;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item,
    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__action {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 8px 12px;
        border-radius: 9px;
        background: transparent;
        text-decoration: none;
        color: var(--hao-mobile-menu-text);
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item:active,
    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__action:active {
        transform: scale(0.985);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item:hover,
    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__action:hover,
    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item:focus-visible,
    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__action:focus-visible {
        background: var(--hao-mobile-menu-hover);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item.is-active {
        background: var(--hao-mobile-menu-active-bg);
        box-shadow: inset 0 0 0 1px rgba(217, 143, 174, 0.18);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__icon,
    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__action-icon {
        width: 18px;
        height: 18px;
        border-radius: 0;
        background: transparent;
        color: var(--hao-mobile-menu-muted);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item.is-active .hao-site-nav__icon {
        color: var(--hao-mobile-menu-active-subtitle);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item-title,
    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__action-text {
        color: var(--hao-mobile-menu-text);
        font-size: 0.9rem;
        font-weight: 450;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item-subtitle {
        color: var(--hao-mobile-menu-muted);
        font-size: 0.74rem;
        opacity: 1;
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item.is-active .hao-site-nav__item-title {
        color: var(--hao-mobile-menu-active-text);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-site-nav__item.is-active .hao-site-nav__item-subtitle {
        color: var(--hao-mobile-menu-active-subtitle);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-sidebar-footer {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--hao-mobile-menu-border);
    }

    #sidebar #sidebar-menus.hao-mobile-grid-menu .hao-mobile-sidebar-footer .hao-site-nav__action {
        background: transparent;
    }

    body.hao-mobile-menu-open #body-wrap,
    body.hao-mobile-menu-open #rightside,
    body.hao-mobile-menu-open #console {
        pointer-events: none !important;
        transform: none;
        transform-origin: left center;
        opacity: 0.992;
        filter: saturate(0.99) brightness(0.995);
        transition:
            opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    body:not(.hao-mobile-menu-open) #body-wrap,
    body:not(.hao-mobile-menu-open) #rightside,
    body:not(.hao-mobile-menu-open) #console {
        opacity: 1;
        filter: none;
        transition:
            opacity 0.24s ease,
            filter 0.24s ease,
            transform 0.24s ease;
    }

    body.hao-mobile-menu-open #console .console-close,
    body.hao-mobile-menu-open #console .close-btn,
    body.hao-mobile-menu-open #console .console-mask {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}