.switch {
            font-size: 17px;
            position: relative;
            display: inline-block;
            width: 3.5em;
            height: 2em;
            -webkit-user-select: none;
            user-select: none;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch:has(:disabled) {
            pointer-events: none;
            opacity: .4;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ffffff00;
            border: 1px solid #adb5bd;
            transition: .4s;
            border-radius: 30px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 1.4em;
            width: 1.4em;
            border-radius: 20px;
            left: 0.27em;
            top: 50%;
            translate: 0 -50%;
            background-color: #adb5bd;
            transition: .4s;
        }

        input:checked+.slider {
            background-color: #252525;
            border: 1px solid #2b2b2b;
        }

        input:focus+.slider {
            box-shadow: 0 0 1px #007bff;
        }

        input:checked+.slider:before {
            transform: translateX(1.4em);
            background-color: #fff;
        }

        .btn-wrapper {
            --width: 160px;
            --height: 60px;
            --padding: 6px;
            --border-radius: 30px;
            --dot-size: 12px;
            --btn-color: #202020;
            --hue: 355deg;
            --animation-duration: 1.2s;

            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--width);
            height: var(--height);
            border-radius: var(--border-radius);
            border: none;

            background-color: #00000008;
            box-shadow:
                1px 1px 2px 0 #fffd,
                2px 2px 2px #0001 inset,
                2px 2px 4px #0001 inset,
                2px 2px 8px #0001 inset;

            transition: box-shadow 50ms linear;
            perspective: 150px;
            perspective-origin: center;
            -webkit-user-select: none;
            user-select: none;
            z-index: 1;
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 0.25em;
            text-align: left;
            padding: 0 var(--height) 0 calc(var(--padding) * 4);

            width: calc(100% - 2 * var(--padding));
            height: calc(100% - 2 * var(--padding));
            border-radius: calc(var(--border-radius) - var(--padding));
            border: none;
            cursor: pointer;

            background: linear-gradient(#fff2, #0001), var(--btn-color);

            box-shadow:
                1px 1px 2px -1px #fff inset,
                0 2px 1px #00000010,
                0 4px 2px #00000010,
                0 8px 4px #00000010,
                0 16px 8px #00000010,
                0 32px 16px #00000010;

            transition:
                transform 0.25s cubic-bezier(0.25, 1.5, 0.5, 2.2),
                box-shadow 0.25s cubic-bezier(0.25, 1.5, 0.5, 1),
                filter 0.3s cubic-bezier(0.25, 1.5, 0.5, 1);
            will-change: transform, filter;

            z-index: 2;
        }

        .btn-txt {
            display: inline-block;

            font-size: 16px;
            font-weight: 600;
            font-family: "Montserrat", "Manrope", sans-serif;
            letter-spacing: 1px;

            color: #fff9;
            background-image: linear-gradient(#fffc, #000a);
            background-clip: text;
            filter: drop-shadow(0 1px 0px #fff8) drop-shadow(0 -1px 0px #0006);
        }

        .disclaimer-txt {
            position: absolute;
            left: var(--border-radius);
            bottom: -24px;
            font-family: "Montserrat", "Manrope", sans-serif;
            font-size: 12px;
            color: #0009;
        }

        .dot {
            position: absolute;
            top: calc(50% - var(--dot-size) / 2);
            right: calc(var(--height) / 2 - var(--padding) / 2);
            width: var(--dot-size);
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            background-color: hsla(var(--hue), 0%, 50%, 0.1);

            border: 1px solid hsla(var(--hue), 0%, 60%, 0.6);
            box-sizing: border-box;

            box-shadow:
                1px 1px 2px -1px #fffe inset,
                0 2px 1px #00000010,
                0 4px 2px #00000010,
                0 8px 4px #00000010;

            pointer-events: none;
            z-index: 3;
        }

        .dot::before {
            content: "";
            position: absolute;
            top: calc(var(--padding) / -2);
            left: calc(var(--padding) / -2);
            width: calc(100% + var(--padding));
            height: calc(100% + var(--padding));
            border-radius: inherit;
            background-color: #0006;
            mask-image: radial-gradient(circle at 50% 60%, transparent 50%, black);
        }

        .dot::after {
            content: "";
            position: absolute;
            top: calc(var(--padding) / -2);
            left: calc(var(--padding) / -2);
            width: calc(100% + var(--padding));
            height: calc(100% + var(--padding));
            border-radius: inherit;
            background-color: #0000;

            box-shadow:
                0 0 10px 2px hsla(var(--hue), 80%, 50%, 0.3),
                0 0 20px 10px hsla(var(--hue), 80%, 50%, 0.5),
                0 0 50px 20px hsla(var(--hue), 80%, 50%, 0.5),
                0 0 16px 1px hsla(var(--hue), 100%, 60%, 0.9) inset;

            opacity: 0;
        }

        @keyframes bg-anim {

            0%,
            100% {
                background-color: hsla(var(--hue), 50%, 50%, 0);
            }

            50% {
                background-color: hsla(var(--hue), 100%, 50%, 1);
            }
        }

        @keyframes opacity-anim {

            0%,
            100% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        .btn:hover,
        .btn:focus-visible {
            filter: drop-shadow(var(--padding) 0 var(--padding) hsla(var(--hue), 70%, 60%, 0.6));
            transform: translate3d(0, 0px, 3px);

            .btn-txt {
                background-color: hsla(var(--hue), 50%, 50%, 1);
                background-image: none;
            }

            .pulse {
                &.dot {
                    animation: none;
                    background-color: hsla(var(--hue), 100%, 50%, 1);
                    background-color: rgb(146, 6, 83);
                }

                &::after {
                    animation: none;
                    opacity: .1;
                }
            }
        }

        .btn:focus-visible {
            outline: 2px dashed hsla(var(--hue), 70%, 40%, 1);
            outline-offset: var(--padding);
        }


        .btn.active {
            .pulse {
                transition: transform 200ms ease-in;

                &.dot {
                    animation: bg-anim var(--animation-duration) ease-in-out infinite;
                }

                &::after {
                    animation: opacity-anim var(--animation-duration) ease-in-out infinite;
                }
            }
        }

        .btn:active {
            filter: drop-shadow(var(--padding) 0 var(--padding) hsla(var(--hue), 100%, 50%, 1));
            transform: translate3d(0, 0, -4px);

            .btn-txt {
                background-color: hsla(var(--hue), 50%, 50%, 1);
            }

            ~.dot {
                animation-play-state: paused;
                background-color: hsla(var(--hue), 100%, 50%, 1);
            }
        }

        .btn-wrapper:has(.btn:active) {
            box-shadow:
                1px 1px 2px 0 #fff,
                2px 2px 2px #0001 inset,
                2px 2px 4px #0001 inset,
                2px 2px 8px #0001 inset,
                0 0 32px 2px hsla(var(--hue), 50%, 50%, 0.5) inset;
        }

        body {
            background-color: #878787;
            font-family: system-ui;

        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .card{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            padding: 40px;
            background: #1111111f;
            border-radius: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }

        ul {
            
            list-style: none;
            
            display: flex;
            flex-direction: column;
            gap: 20px;


            li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 160px;
            }
        }

        .switch-label {
            display: inline-block;
            text-align: left;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            letter-spacing: 1px;
            vertical-align: middle;
            padding-inline-end: 10px;
        }

        h1 {
            text-transform: uppercase;
            padding: 50px;
            font-family: 'Work Sans', sans-serif;
            font-weight: 900;
            color: #ffffff7e;
            font-size: 19px;
            position: absolute;
            top: -94px;
            left: 50%;
            text-align: center;
            white-space: nowrap;
            translate: -50% 0;
            letter-spacing: 2px;
            text-shadow: 0px 1px 1px #00000080;
        }