@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s, color 0.3s;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        .dark ::-webkit-scrollbar-track {
            background: #1f2937;
        }

        .dark ::-webkit-scrollbar-thumb {
            background: #4b5563;
        }

        /* Checkerboard pattern for transparency */
        .checkerboard {
            background-color: #fff;
            background-image:
                linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
                linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
        }

        .tool-btn.active {
            background-color: #dcfce7;
            border-color: #166534;
            color: #166534;
            box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
        }

        .dark .tool-btn.active {
            background-color: #064e3b;
            border-color: #34d399;
            color: #34d399;
        }

        /* Magnifier Glass */
        .magnifier {
            display: none;
            position: absolute;
            border: 3px solid #fff;
            border-radius: 50%;
            cursor: none;
            width: 120px;
            height: 120px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            background-repeat: no-repeat;
            background-color: white;
            z-index: 100;
            pointer-events: none;
        }

        /* Range Slider Styling */
        input[type=range] {
            height: 4px;
            border-radius: 2px;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #166534;
            cursor: pointer;
            margin-top: -6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .dark input[type=range]::-webkit-slider-thumb {
            background: #34d399;
        }

        /* No scrollbar utility */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
   
           #btn-path {
            display: none !important;
            }
    @media (max-width: 768px) {
      #btn-path {
        display: none !important;
      }
    }