/* Custom Utilities */
        body {
            font-family: 'Inter', sans-serif;
        }

        /* Subtle Tech Grid Background */
        .bg-tech-grid {
            background-size: 60px 60px;
            background-image:
                linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
        }

        @media (prefers-color-scheme: dark) {
            .bg-tech-grid {
                background-image:
                    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            }
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Cinematic Reveal Animation (Opacity focused) */
        .reveal {
            opacity: 0;
            transform: translateY(10px);
            /* Reduced movement for calmness */
            transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Glassmorphism Utility with Softer Edges */
        .glass-panel {
            background-color: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(0, 0, 0, 0.04);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
        }

        @media (prefers-color-scheme: dark) {
            .glass-panel {
                background-color: rgba(10, 10, 10, 0.4);
                border: 1px solid rgba(255, 255, 255, 0.06);
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
            }
        }

        /* Gradient Fades / Masks */
        .fade-mask-bottom {
            -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        }

        .fade-mask-x {
            -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        .fade-mask-radial {
            -webkit-mask-image: radial-gradient(circle, black 60%, transparent 100%);
            mask-image: radial-gradient(circle, black 60%, transparent 100%);
        }

        /* Section Separator Gradient */
        .separator-gradient {
            background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05), transparent);
        }

        @media (prefers-color-scheme: dark) {
            .separator-gradient {
                background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
            }
        }

        /* Font Utilities */
        .font-mono-tech {
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: -0.02em;
        }

        /* ==============================
        SCROLLBAR — MINIMAL & SOLID
        ================================ */
        /* Mengatur lebar scrollbar */
        #resultBox::-webkit-scrollbar {
            width: 6px;
        }

        /* Track (jalur) transparan agar menyatu dengan efek kaca */
        #resultBox::-webkit-scrollbar-track {
            background: transparent;
        }

        /* Thumb (batang scroll) dengan warna semi-transparan */
        #resultBox::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            /* Mode Terang */
            border-radius: 10px;
        }

        /* Thumb untuk Dark Mode */
        .dark #resultBox::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
            /* Mode Gelap */
        }

        /* Hover effect pada scrollbar */
        #resultBox::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.4);
        }

        .dark #resultBox::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }


        /* ==============================
        VISUALIZER — MONOCHROME POWER
        ================================ */
        .visualizer {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 16px;
            width: 24px;
            opacity: 0.85;
        }

        .bar {
            width: 3px;
            background-color: currentColor;
            border-radius: 1px;
            animation: equalizer 1.1s infinite ease-in-out;
            transform-origin: bottom;
        }

        .bar:nth-child(1) {
            animation-delay: 0s;
            height: 35%;
        }

        .bar:nth-child(2) {
            animation-delay: 0.15s;
            height: 85%;
        }

        .bar:nth-child(3) {
            animation-delay: 0.3s;
            height: 50%;
        }

        .bar:nth-child(4) {
            animation-delay: 0.1s;
            height: 70%;
        }

        @keyframes equalizer {
            0% {
                height: 20%;
                opacity: 0.6;
            }

            50% {
                height: 100%;
                opacity: 1;
            }

            100% {
                height: 20%;
                opacity: 0.6;
            }
        }

        .paused .bar {
            animation-play-state: paused;
            height: 12% !important;
            opacity: 0.4;
        }


        /* ==============================
        RANGE SLIDER — CLEAN & TECH
        ================================ */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            width: 100%;
            cursor: pointer;
        }

        /* Track */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 4px;
            background: linear-gradient(to right,
                    rgba(120, 120, 120, 0.9),
                    rgba(180, 180, 180, 0.6));
            border-radius: 3px;
        }

        input[type="range"]::-moz-range-track {
            height: 4px;
            background: rgba(163, 163, 163, 0.8);
            border-radius: 3px;
        }

        /* Thumb */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background: currentColor;
            border: 1px solid rgba(255, 255, 255, 0.6);
            margin-top: -3px;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            opacity: 0.9;
        }

        input[type="range"]::-moz-range-thumb {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background: currentColor;
            border: 1px solid rgba(255, 255, 255, 0.6);
            transition: transform 0.2s ease;
        }

        input[type="range"]::-moz-range-thumb:hover {
            transform: scale(1.15);
        }


        /* ==============================
        OPTIONAL — FADE UTILITIES
        (For image / box fading)
        ================================ */
        .fade-bottom {
            mask-image: linear-gradient(to bottom,
                    rgba(0, 0, 0, 1) 70%,
                    rgba(0, 0, 0, 0));
        }

        .fade-top {
            mask-image: linear-gradient(to top,
                    rgba(0, 0, 0, 1) 70%,
                    rgba(0, 0, 0, 0));
        }

        /* Animasi Kilap (Shine) - Menyapu dari kiri ke kanan */
        @keyframes shine {
            0% {
                transform: translateX(-150%) skewX(-20deg);
            }

            50%,
            100% {
                transform: translateX(250%) skewX(-20deg);
            }
        }

        /* Animasi Gradient 'Bernapas' (Black Light) */
        @keyframes gradient-move {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .animate-shine {
            animation: shine 3.5s infinite ease-in-out;
            /* Durasi disesuaikan agar smooth */
        }

        .animate-gradient-move {
            background-size: 200% 200%;
            animation: gradient-move 6s ease infinite;
        }

        /* Scrollbar Tipis */
        #resultBox::-webkit-scrollbar {
            width: 4px;
        }

        #resultBox::-webkit-scrollbar-track {
            background: transparent;
        }

        #resultBox::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }

        .dark #resultBox::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* Animasi Fade In & Checkmark */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animate-fade-in {
            animation: fadeIn 0.2s ease-out forwards;
        }