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 .sculpted-image-container {
    display: block !important;
}

html[data-color-mode="monochrome"] #gallery img {
    visibility: visible !important;
    filter: grayscale(1);
}

@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: inline-block;
    position: relative;
    z-index: 101;
    flex: 0 0 auto;
    max-width: min(100%, 10rem);
    border: 1px solid #d4af37;
    border-radius: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: #161c26;
    color: #f8fafc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    font: 600 0.8rem/1.2 Inter, system-ui, sans-serif;
    cursor: pointer;
    color-scheme: dark;
}

#color-mode-toggle option {
    background: #161c26;
    color: #f8fafc;
}

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

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

html[data-color-mode="light"] #color-mode-toggle,
html[data-color-mode="light"] #color-mode-toggle option {
    border-color: #cbd5e1;
    background: #fff;
    color: #334155;
    color-scheme: light;
}

@media (max-width: 480px) {
    #color-mode-toggle {
        max-width: 8rem;
        padding: 0.45rem 0.4rem;
        font-size: 0.68rem;
    }
}

@media (max-width: 768px) {
    header.color-mode-header {
        padding-top: 3.5rem;
    }

    #color-mode-toggle {
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
    }
}

html[data-color-mode="monochrome"] #persistent-cta-btn {
    background: linear-gradient(#0f141c, #0f141c) padding-box,
        linear-gradient(120deg, #f472b6, #a855f7 45%, #38bdf8 75%, #34d399) border-box;
    color: #fff;
}

html[data-color-mode="light"] {
    color-scheme: light;
    scrollbar-color: #94a3b8 #e2e8f0;
}

html[data-color-mode="light"] body {
    background-color: #f8fafc !important;
    background-image: none !important;
    color: #1e293b !important;
}

html[data-color-mode="dark"] .text-gradient-metallic,
html[data-color-mode="dark"] .text-gradient-jewel,
html[data-color-mode="dark"] .jewel-gradient-text {
    background-image: linear-gradient(90deg, #22d3ee, #f472b6, #34d399, #60a5fa, #c084fc) !important;
}

html[data-color-mode="light"] .text-gradient-metallic,
html[data-color-mode="light"] .text-gradient-jewel,
html[data-color-mode="light"] .jewel-gradient-text {
    background-image: linear-gradient(90deg, #087e9b, #be185d, #047857, #1d4ed8, #7e22ce) !important;
}

html[data-color-mode="light"] header,
html[data-color-mode="light"] .form-modal-content,
html[data-color-mode="light"] #cookie-banner {
    background-color: rgba(255, 255, 255, 0.96) !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

html[data-color-mode="light"] .metallic-border-card,
html[data-color-mode="light"] .glass-card,
html[data-color-mode="light"] .contact-card,
html[data-color-mode="light"] .quiz-option,
html[data-color-mode="light"] .tool-menu-card {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

html[data-color-mode="light"] section[class*="bg-slate-950"] {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

html[data-color-mode="light"] .form-modal-overlay {
    background: rgba(226, 232, 240, 0.82) !important;
}

html[data-color-mode="light"] .nav-links a {
    color: #334155;
}

html[data-color-mode="light"] .nav-links a:hover {
    color: #9d174d;
    text-shadow: none;
}

html[data-color-mode="light"] [class*="bg-slate-9"],
html[data-color-mode="light"] [class*="bg-gray-9"],
html[data-color-mode="light"] [class*="bg-zinc-9"],
html[data-color-mode="light"] [class*="bg-sapphire-9"],
html[data-color-mode="light"] [class*="bg-teal-9"] {
    background-color: #fff !important;
    background-image: none;
}

html[data-color-mode="light"] [class*="bg-slate-8"],
html[data-color-mode="light"] [class*="bg-gray-8"],
html[data-color-mode="light"] [class*="bg-zinc-8"],
html[data-color-mode="light"] [class*="bg-sapphire-8"] {
    background-color: #f1f5f9 !important;
    background-image: none;
}

html[data-color-mode="light"] [class*="border-slate-8"],
html[data-color-mode="light"] [class*="border-slate-7"],
html[data-color-mode="light"] [class*="border-gray-8"],
html[data-color-mode="light"] [class*="border-sapphire-7"],
html[data-color-mode="light"] [class*="border-teal-8"] {
    border-color: #cbd5e1 !important;
}

html[data-color-mode="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-color-mode="light"] select,
html[data-color-mode="light"] textarea {
    background-color: #fff !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
    color-scheme: light;
}

html[data-color-mode="light"] option {
    background-color: #fff;
    color: #1e293b;
}

html[data-color-mode="light"] input[type="range"] {
    background-color: transparent !important;
    accent-color: #9d174d;
}

html[data-color-mode="light"] input::placeholder,
html[data-color-mode="light"] textarea::placeholder {
    color: #64748b !important;
    opacity: 1;
}

html[data-color-mode="light"] .text-white:not(button):not([style*="background"]):not([class*="bg-gradient"]),
html[data-color-mode="light"] .text-slate-100,
html[data-color-mode="light"] .text-slate-200 {
    color: #1e293b !important;
}

html[data-color-mode="light"] .text-slate-300,
html[data-color-mode="light"] .text-gray-300 {
    color: #475569 !important;
}

html[data-color-mode="light"] .text-slate-400,
html[data-color-mode="light"] .text-gray-400 {
    color: #64748b !important;
}

html[data-color-mode="light"] .text-amber-300,
html[data-color-mode="light"] .text-amber-200 {
    color: #92400e !important;
}

html[data-color-mode="light"],
html[data-color-mode="light"] * {
    scrollbar-color: #94a3b8 #e2e8f0;
}

html[data-color-mode="light"]::-webkit-scrollbar-track,
html[data-color-mode="light"] *::-webkit-scrollbar-track {
    background: #e2e8f0;
}

html[data-color-mode="light"]::-webkit-scrollbar-thumb,
html[data-color-mode="light"] *::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-color: #e2e8f0;
}

html[data-color-mode="seasonal"] {
    color-scheme: dark;
    scrollbar-color: #9d4edd #130a1c;
}

html[data-color-mode="seasonal"] body {
    background-color: #130a1c !important;
    background-image:
        radial-gradient(at 10% 10%, rgba(255, 107, 0, 0.12) 0, transparent 50%),
        radial-gradient(at 90% 20%, rgba(157, 78, 221, 0.15) 0, transparent 50%),
        radial-gradient(at 50% 50%, rgba(164, 232, 37, 0.08) 0, transparent 50%),
        radial-gradient(at 20% 80%, rgba(157, 78, 221, 0.12) 0, transparent 50%),
        radial-gradient(at 80% 90%, rgba(255, 107, 0, 0.15) 0, transparent 50%) !important;
    color: #f1f5f9 !important;
}

.ghost-flight-layer {
    display: none;
}

html[data-color-mode="seasonal"] .ghost-flight-layer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

html[data-color-mode="seasonal"] .drifting-ghost {
    position: absolute;
    left: -12vw;
    width: clamp(30px, 3.2vw, 50px);
    height: auto;
    fill: rgba(225, 213, 245, 0.7);
    filter: drop-shadow(0 0 7px rgba(157, 78, 221, 0.45));
    animation: ghost-drift 34s ease-in-out infinite;
}

html[data-color-mode="seasonal"] .drifting-ghost:nth-child(1) {
    top: 13%;
    width: clamp(26px, 2.6vw, 40px);
    animation-duration: 37s;
    animation-delay: -21s;
}

html[data-color-mode="seasonal"] .drifting-ghost:nth-child(2) {
    top: 34%;
    animation-duration: 43s;
    animation-delay: -8s;
}

html[data-color-mode="seasonal"] .drifting-ghost:nth-child(3) {
    top: 61%;
    width: clamp(24px, 2.4vw, 36px);
    animation-duration: 39s;
    animation-delay: -30s;
}

html[data-color-mode="seasonal"] .drifting-ghost:nth-child(4) {
    top: 82%;
    width: clamp(28px, 2.8vw, 44px);
    animation-duration: 46s;
    animation-delay: -14s;
}

.bat-flight-layer {
    display: none;
}

html[data-color-mode="seasonal"] .bat-flight-layer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

html[data-color-mode="seasonal"] .drifting-bat {
    position: absolute;
    left: -12vw;
    width: clamp(38px, 4.2vw, 64px);
    height: auto;
    fill: #08050d;
    filter: drop-shadow(0 0 4px rgba(157, 78, 221, 0.35));
    animation: bat-drift 30s ease-in-out infinite;
}

html[data-color-mode="seasonal"] .drifting-bat:nth-child(1) {
    top: 22%;
    animation-duration: 31s;
    animation-delay: -18s;
}

html[data-color-mode="seasonal"] .drifting-bat:nth-child(2) {
    top: 46%;
    width: clamp(32px, 3.5vw, 52px);
    animation-duration: 36s;
    animation-delay: -7s;
}

html[data-color-mode="seasonal"] .drifting-bat:nth-child(3) {
    top: 69%;
    animation-duration: 33s;
    animation-delay: -25s;
}

html[data-color-mode="seasonal"] .drifting-bat:nth-child(4) {
    top: 88%;
    width: clamp(30px, 3.2vw, 48px);
    animation-duration: 39s;
    animation-delay: -12s;
}

html[data-color-mode="seasonal"] .bat-left-wing,
html[data-color-mode="seasonal"] .bat-right-wing {
    transform-box: view-box;
    animation: bat-flap 0.38s ease-in-out infinite alternate;
}

html[data-color-mode="seasonal"] .bat-left-wing {
    transform-origin: 50px 22px;
}

html[data-color-mode="seasonal"] .bat-right-wing {
    transform-origin: 50px 22px;
    animation-delay: -0.19s;
}

@keyframes ghost-drift {
    0% { transform: translate3d(0, 0, 0) rotate(-4deg); }
    25% { transform: translate3d(32vw, -3vh, 0) rotate(4deg); }
    50% { transform: translate3d(64vw, 2vh, 0) rotate(-3deg); }
    75% { transform: translate3d(96vw, -2vh, 0) rotate(3deg); }
    100% { transform: translate3d(124vw, 0, 0) rotate(-4deg); }
}

@keyframes bat-drift {
    0% { transform: translate3d(0, 0, 0) rotate(-5deg); }
    25% { transform: translate3d(32vw, -3vh, 0) rotate(4deg); }
    50% { transform: translate3d(64vw, 2vh, 0) rotate(-3deg); }
    75% { transform: translate3d(96vw, -2vh, 0) rotate(5deg); }
    100% { transform: translate3d(124vw, 0, 0) rotate(-5deg); }
}

@keyframes bat-flap {
    from { transform: rotate(-24deg) scaleY(0.82); }
    to { transform: rotate(24deg) scaleY(1); }
}

html[data-color-mode="seasonal"] .text-gradient-metallic,
html[data-color-mode="seasonal"] .text-gradient-jewel,
html[data-color-mode="seasonal"] .jewel-gradient-text {
    background-image: linear-gradient(90deg, #a4e824, #9d4edd, #e83e8c, #ff6b00) !important;
}

html[data-color-mode="seasonal"] header,
html[data-color-mode="seasonal"] .form-modal-content,
html[data-color-mode="seasonal"] #cookie-banner {
    background-color: rgba(19, 10, 28, 0.95) !important;
    color: #f1f5f9 !important;
    border-color: rgba(157, 78, 221, 0.55) !important;
}

html[data-color-mode="seasonal"] header {
    border-bottom-color: rgba(157, 78, 221, 0.4) !important;
}

html[data-color-mode="seasonal"] .metallic-border-card,
html[data-color-mode="seasonal"] .glass-card,
html[data-color-mode="seasonal"] .contact-card,
html[data-color-mode="seasonal"] .quiz-option,
html[data-color-mode="seasonal"] .tool-menu-card {
    background-color: rgba(19, 10, 28, 0.85) !important;
    color: #f1f5f9 !important;
    border-color: rgba(157, 78, 221, 0.4) !important;
}

html[data-color-mode="seasonal"] .metallic-border-card::before {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.6), rgba(157, 78, 221, 0.7), rgba(164, 232, 37, 0.55)) !important;
}

html[data-color-mode="seasonal"] .sculpted-image-container {
    border-color: rgba(157, 78, 221, 0.55) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 107, 0, 0.15) !important;
}

html[data-color-mode="seasonal"] section[class*="bg-slate-950"] {
    background-color: rgba(19, 10, 28, 0.92) !important;
    color: #f1f5f9 !important;
}

html[data-color-mode="seasonal"] .nav-links a:hover {
    color: #ff9b3d !important;
    text-shadow: 0 0 12px rgba(255, 107, 0, 0.6) !important;
}

html[data-color-mode="seasonal"] .nav-links a::after,
html[data-color-mode="seasonal"] .cmyk-bar {
    background-image: linear-gradient(90deg, #ff6b00, #9d4edd 35%, #e83e8c 65%, #a4e824) !important;
}

html[data-color-mode="seasonal"] .btn-jewel-primary {
    background-image: linear-gradient(135deg, #ff6b00, #9d4edd 55%, #a4e824) !important;
    box-shadow: 0 8px 25px rgba(255, 107, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

html[data-color-mode="seasonal"] .btn-copper-outline {
    background-color: rgba(19, 10, 28, 0.8) !important;
    border-color: #9d4edd !important;
    color: #f1f5f9 !important;
    box-shadow: 0 6px 20px rgba(157, 78, 221, 0.25) !important;
}

html[data-color-mode="seasonal"] #persistent-cta-btn {
    background: linear-gradient(#130a1c, #130a1c) padding-box,
        linear-gradient(120deg, #ff6b00, #9d4edd 40%, #e83e8c 70%, #a4e824) border-box !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 0, 0.4) !important;
}

html[data-color-mode="seasonal"] #cookie-settings-button {
    background-color: rgba(19, 10, 28, 0.96) !important;
    border-color: rgba(255, 107, 0, 0.65) !important;
    color: #f1f5f9 !important;
}

html[data-color-mode="seasonal"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-color-mode="seasonal"] select,
html[data-color-mode="seasonal"] textarea {
    background-color: #1b1025 !important;
    border-color: rgba(157, 78, 221, 0.6) !important;
    color: #f1f5f9 !important;
    color-scheme: dark;
}

html[data-color-mode="seasonal"],
html[data-color-mode="seasonal"] * {
    scrollbar-color: #9d4edd #130a1c;
}

html[data-color-mode="light"] button,
html[data-color-mode="light"] input[type="button"],
html[data-color-mode="light"] input[type="submit"],
html[data-color-mode="light"] input[type="reset"],
html[data-color-mode="light"] [role="button"],
html[data-color-mode="light"] a.btn-jewel-primary,
html[data-color-mode="light"] a.btn-copper-outline,
html[data-color-mode="light"] a[class*="rounded-full"][class*="shadow-"],
html[data-color-mode="light"] #persistent-cta-btn,
html[data-color-mode="light"] #cookie-settings-button {
    border: 2px solid transparent !important;
    background:
        linear-gradient(#f8fafc, #f8fafc) padding-box,
        linear-gradient(110deg, #ff00b8, #ffeb3b, #ff9800, #22c55e, #3b82f6, #a855f7) border-box !important;
    color: #1e293b !important;
    box-shadow:
        0 0 8px rgba(255, 0, 184, 0.2),
        0 0 14px rgba(255, 152, 0, 0.14),
        0 0 20px rgba(59, 130, 246, 0.14) !important;
}

html[data-color-mode="light"] button:hover,
html[data-color-mode="light"] input[type="button"]:hover,
html[data-color-mode="light"] input[type="submit"]:hover,
html[data-color-mode="light"] input[type="reset"]:hover,
html[data-color-mode="light"] [role="button"]:hover,
html[data-color-mode="light"] a.btn-jewel-primary:hover,
html[data-color-mode="light"] a.btn-copper-outline:hover,
html[data-color-mode="light"] a[class*="rounded-full"][class*="shadow-"]:hover,
html[data-color-mode="light"] #persistent-cta-btn:hover,
html[data-color-mode="light"] #cookie-settings-button:hover {
    box-shadow:
        0 0 11px rgba(255, 0, 184, 0.32),
        0 0 20px rgba(255, 152, 0, 0.22),
        0 0 28px rgba(59, 130, 246, 0.22) !important;
}

html[data-color-mode="seasonal"] button,
html[data-color-mode="seasonal"] input[type="button"],
html[data-color-mode="seasonal"] input[type="submit"],
html[data-color-mode="seasonal"] input[type="reset"],
html[data-color-mode="seasonal"] [role="button"],
html[data-color-mode="seasonal"] a.btn-jewel-primary,
html[data-color-mode="seasonal"] a.btn-copper-outline,
html[data-color-mode="seasonal"] a[class*="rounded-full"][class*="shadow-"],
html[data-color-mode="seasonal"] #persistent-cta-btn,
html[data-color-mode="seasonal"] #cookie-settings-button {
    border: 2px solid transparent !important;
    background:
        linear-gradient(#130a1c, #130a1c) padding-box,
        linear-gradient(110deg, #ff6b00, #9d4edd, #e83e8c, #a4e824) border-box !important;
    color: #f1f5f9 !important;
    box-shadow:
        0 0 8px rgba(255, 107, 0, 0.28),
        0 0 15px rgba(157, 78, 221, 0.25),
        0 0 22px rgba(164, 232, 37, 0.18) !important;
}

html[data-color-mode="seasonal"] button:hover,
html[data-color-mode="seasonal"] input[type="button"]:hover,
html[data-color-mode="seasonal"] input[type="submit"]:hover,
html[data-color-mode="seasonal"] input[type="reset"]:hover,
html[data-color-mode="seasonal"] [role="button"]:hover,
html[data-color-mode="seasonal"] a.btn-jewel-primary:hover,
html[data-color-mode="seasonal"] a.btn-copper-outline:hover,
html[data-color-mode="seasonal"] a[class*="rounded-full"][class*="shadow-"]:hover,
html[data-color-mode="seasonal"] #persistent-cta-btn:hover,
html[data-color-mode="seasonal"] #cookie-settings-button:hover {
    box-shadow:
        0 0 12px rgba(255, 107, 0, 0.4),
        0 0 20px rgba(157, 78, 221, 0.35),
        0 0 30px rgba(164, 232, 37, 0.26) !important;
}

html[data-color-mode="seasonal"]::-webkit-scrollbar-track,
html[data-color-mode="seasonal"] *::-webkit-scrollbar-track {
    background: #130a1c;
}

html[data-color-mode="seasonal"]::-webkit-scrollbar-thumb,
html[data-color-mode="seasonal"] *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff6b00, #9d4edd, #a4e824);
    border-color: #130a1c;
}

@media (prefers-reduced-motion: reduce) {
    html[data-color-mode="seasonal"] .ghost-flight-layer,
    html[data-color-mode="seasonal"] .bat-flight-layer {
        display: none;
    }
}