html[data-color-mode="monochrome"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    background: #808080;
    mix-blend-mode: saturation;
    pointer-events: none;
}

html[data-color-mode="monochrome"] img,
html[data-color-mode="monochrome"] picture,
html[data-color-mode="monochrome"] video,
html[data-color-mode="monochrome"] svg {
    visibility: hidden !important;
}

html[data-color-mode="monochrome"] .sculpted-image-container {
    display: none !important;
}

html[data-color-mode="monochrome"] #gate-overlay,
html[data-color-mode="monochrome"] .pillar {
    filter: grayscale(1);
}

html[data-color-mode="monochrome"] #gate-overlay svg {
    visibility: visible !important;
}

html[data-color-mode="monochrome"] #home .sculpted-image-container {
    display: block !important;
}

html[data-color-mode="monochrome"] #home img[data-monochrome-src] {
    visibility: visible !important;
}

html[data-color-mode="monochrome"] header img[data-monochrome-src] {
    visibility: visible !important;
}

html[data-color-mode="monochrome"] #gallery {
    display: none !important;
}

html[data-color-mode="monochrome"] a[href="#gallery"] {
    display: none !important;
}

@keyframes mode-pillar-reveal {
    0%, 100% {
        opacity: 0;
    }
    20%, 75% {
        opacity: 1;
    }
}

html.gate-transition-active .pillar {
    visibility: visible !important;
    animation: mode-pillar-reveal 1.7s ease both !important;
}

@media (prefers-reduced-motion: reduce) {
    html.gate-transition-active .pillar {
        animation: none !important;
        opacity: 1 !important;
    }
}

html[data-color-mode="monochrome"],
html[data-color-mode="monochrome"] * {
    scrollbar-color: #aaa #222 !important;
}

html[data-color-mode="monochrome"]::-webkit-scrollbar-track,
html[data-color-mode="monochrome"] *::-webkit-scrollbar-track {
    background: #222 !important;
}

html[data-color-mode="monochrome"]::-webkit-scrollbar-thumb,
html[data-color-mode="monochrome"] *::-webkit-scrollbar-thumb {
    background: #777 !important;
    border-color: #222 !important;
}

html[data-color-mode="monochrome"]::-webkit-scrollbar-thumb:hover,
html[data-color-mode="monochrome"] *::-webkit-scrollbar-thumb:hover {
    background: #aaa !important;
}

#color-mode-toggle {
    display: block;
    position: relative;
    margin: 0 0 0.75rem;
    max-width: calc(100vw - 2rem);
    border: 1px solid #d4af37;
    border-radius: 9999px;
    padding: 0.65rem 1rem;
    background: #161c26;
    color: #f8fafc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
    font: 600 0.875rem/1.2 Inter, system-ui, sans-serif;
    cursor: pointer;
}

#color-mode-toggle:focus-visible {
    outline: 3px solid #67e8f9;
    outline-offset: 3px;
}

html[data-color-mode="monochrome"] #color-mode-toggle {
    border-color: #fff;
    background: #111;
    color: #fff;
}

html[data-color-mode="monochrome"] #persistent-cta-btn {
    background: linear-gradient(135deg, #202020 0%, #4a4a4a 50%, #202020 100%);
    color: #fff;
}

@media (max-width: 480px) {
    #color-mode-toggle {
        padding: 0.55rem 0.75rem;
        font-size: 0.75rem;
    }
}