/*
    * Y2K.css
    * A neo-retro CSS style library
    * Author: Kameron Brooks
    * License: MIT
    * Version: 0.1.0
*/

/*
* Dithering patterns to simulate retro dithered windows
* The patterns are based on the Bayer matrix dithering algorithm.
* Each image is a 4x4 pixel image that is repeated to create the dithered effect.
*/

.dither-black-white-0 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNkYGD4z4AEmJA5xAkAAEEUAQdKO6E4AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-1 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGP4////fwYGBjhmhDLggAmZg1UAANwPB/4m/PFgAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-2 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVR4nGP4////fwYGBjhmhDLggAnGgChkYMBQAQAwuAv57/pkOwAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-3 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVR4nGP4////fwYGBhAFphlBBAMSYIIxIAoYGDBUAADeCg727vmMQQAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-4 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIUlEQVR4nGP4////fwYGBhAFphlBBAMSYIJIgJWAaQwVAD25EfMfKhC+AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-5 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVR4nGP4////fwYGBhAFphnQOP+ZQGxGRkaQKEiSgRGmDAYAOO0X72azEqIAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-6 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJ0lEQVR4nF2KuREAMAyDUPbfGZ9ySeMKPaAKFJes4mlO0rUn+dpTGUHkGuxnK8EOAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-7 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVR4nGP4////fwYGBhAFphmQOWAaXQUjTBlUKQMAD4wh4KVGjFUAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-8 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVR4nGP4////fwYGBhAFphmQOWCaoAoAP0sn2br7KY8AAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-9 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVR4nGP8////fwYoYGRkZGACETAOWA6qAkSBaZAknAMSBADC+RryKpG3cwAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-10 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVR4nGP8////fwYoYGRkZGACETAOSI4JRMA4IABWARMEiQAAP3oQCmHvxpsAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-11 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJElEQVR4nGP8////fwYkwMTIyAhmwGgmkAIQB6YQrAImCBIBANA4DQrzm4tdAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-12 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGP8////fwYkwMTIyAhmwGmCKgCFDQgLis/bygAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-13 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVR4nGP8////fwYkwARjMDIyogrAFDLBZGA0AE7SBwpg/bzzAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-14 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVR4nGP8////fwYkwARjMDIyogrAFDLBZGAAAE69BwfCLAnoAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);

}

.dither-black-white-15 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVR4nGP8////fwYkwITMwS7AyMiIIgIABooEB0maIPsAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-white-16 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGP8////fwYkwITMIU4AAAZdBATO5G0jAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-0 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGP8////fwYkwITMIU4AAAZdBATO5G0jAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-1 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGNkYGD4////fwYYYELmgAVQeNgEAIzWBwGO65rpAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-2 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVR4nGNkYGD4////fwYYYELmgAVgDEZGRlQBmEoAogkKAcIaX9kAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-3 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVR4nGNgYGD4DwIwmhHKgQMmGIORkRFVAKYQABk3EPjlYbI5AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-4 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVR4nGNgYGD4DwIwmhHKgQMmRkZGMANOo6sAAD5hEflhK1h/AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-5 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJElEQVR4nGNgYGD4DwIwmgnEZmRkBPEYQIAJxgHRIMAIVQ4HAN57FvhPeEprAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-6 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVR4nDWKQQoAMAyDtP//84Zs9WKEAJxYT1utiNnI4b+/UC7ehBb7wj3RowAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-7 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVR4nGNgYGD4DwJwGoXDwADCqCoYoRwwYGRkZAAAG4kh4+Hs56QAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-8 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNgYGD4DwJwGoXDwADCBFQAAD9LJ9m2AyGiAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-9 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVR4nGNkYGD4zwAF////Z2ACETAOIyMjjA0WhdAoHAaG/wA8TB3p/gdV4AAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-10 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJUlEQVR4nDWKiQkAAAgCz/bf2UhSUPwEmIdt5qRBUn3aMI9b+lzk2Bb1uvlG7wAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-11 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVR4nGNkYGD4z4AEmP7/h/BhNJQN5oExWAUjIyNcBQBDCxP1jue4oAAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-12 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGNkYGD4z4AEmP7/h/BhNCNBFQCtkw35nMoCzQAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-13 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNkYGD4z4AEmGCM//8h4owYKmAyMBoAGyYK/JLjdm0AAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-14 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNkYGD4z4AEmGCM//8h4owYKmAyMAAABjsH/6qExwYAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-15 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVR4nGNkYGD4z4AEmJA52AX+/0fRwQAAbecEBAftaRYAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-black-16 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNkYGD4z4AEmJA5xAkAAEEUAQdKO6E4AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-0 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGP8////fwYkwITMIU4AAAZdBATO5G0jAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-1 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNkYGBg+P///38QDQJMyBywADIHqwAAt6sIACSvv9QAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-2 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAI0lEQVR4nGNkYGBg+P///38QDQJMyBywAIzByMjIiCIAUwkA0e8MAA4smFoAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-3 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVR4nGNgYGBg+P///38YzQjjwAATjMHIyMiIIgBTCQCmsQ/6VXGFxQAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-4 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGNgYGBg+P///38YzQjjoAC8KgCBMRfr1aA+rQAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-5 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNgYGBg+P///384jcyBsVEEGeGiUAAAs9kf4hvA86wAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-6 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIUlEQVR4nFWIuREAAAiDYP+hY2VOKx4AkqS8sf6mvYDqALPjH+ZQDGI/AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-7 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVR4nGNgYGBg+P///384jcKBAWRBRmQZRkZGRgAidRvq0P6/KgAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-8 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNgYGBg+P///384jcKBAbwqADxAH+GoUSnkAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-9 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNgQAL/////DyFgHBQZXCoARycb5cPC7FwAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-10 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGNgQAL/////DyFgHBQZdA5MEAD5ZhfpGO8HVwAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-11 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFklEQVR4nGNgQAf/////j0yjCGJVAQAkPBPt5nDDIgAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-12 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNgQAf/////j0xjAnQVALabD/FPsIgjAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-13 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNgwAX+////H78MTAUA9U4L9TRz5JEAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-14 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgwAX+////nzgZANtoB/nMzByQAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-15 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgIB38////P7IAADoKA/0lPq4eAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-white-alpha-16 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADElEQVR4nGNgoBwAAABEAAHX40j9AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-0 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNkYGD4z4AEmJA5xAkAAEEUAQdKO6E4AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-1 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNkgID/UJqBCZkDE0ABGAIAa+kCBoZbVNEAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-2 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVR4nGNkgID/UJqBCZkDE4ABRnQBsEoAcPoDBpHL2roAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-3 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGNggID/MJoRiQMGTEhskCSKAFglAKRPBAOznulCAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-4 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNggID/MJoRiYMCcKsAANewBf2hf8fHAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-5 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNggID/yDQyB8ZGCDIii4KEACFCB/rOBeNqAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-6 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGNggID/yDQyB8ZGCDIiizIwMDACACFDB/s7/XsLAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-7 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNggID/yDQKBwbggoxoMowA/lcG/DBsgmIAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-8 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNggID/yDQKBwZwqwAAA08H+ePt+y4AAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-9 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNgQAX/4QQSjcLBVAEAx3wG+tCzOsQAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-10 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVR4nGNgQAX/4QQSjZsDpgG1jgX7/eHZnQAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-11 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgwAL+o9G4OWAaAIHCBPz56KPPAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-12 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEUlEQVR4nGNgwAL+o9EEVAAAZ9wD/cOfYBwAAAAASUVORK5CYII=');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-13 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEElEQVR4nGNgwAP+E5QB0wA5CwL+Ncf2agAAAABJRU5ErkJggg==');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-14 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVR4nGNgwAP+EycDADQQAf+eAmX9AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-15 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVR4nGNgIAv8R+YBAA03AQDv+27jAAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-black-alpha-16 {

    background-repeat: repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADElEQVR4nGNgoBwAAABEAAHX40j9AAAAAElFTkSuQmCC');
    background-size: 4px 4px;
    image-rendering: var(--image-pixelated, auto);
}

.dither-smooth {
    --image-pixelated: auto;
}

.dither-pixelated {
    --image-pixelated: pixelated;
}

.retro-shadow-default {
    box-shadow: 10px 10px 0px #000;
}

.retro-shadow-sm {
    box-shadow: 5px 5px 0px #000;
}

.retro-shadow-xs {
    box-shadow: 2px 2px 0px #111;
}

.retro-inverse-shadow-default {
    box-shadow: 10px 10px 0px #ffffff;
}

.retro-inverse-shadow-sm {
    box-shadow: 5px 5px 0px #ffffff;
}

.retro-inverse-shadow-xs {
    box-shadow: 2px 2px 0px #eee;
}


.retro-shadow-dither,
.retro-shadow-dither-sm {
    position: relative;
    /* stack above the pseudo‐element */
    z-index: 3;

}

.retro-shadow-dither::before,
.retro-shadow-dither-sm::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    box-sizing: border-box;

    z-index: -1;
    background: inherit;
    border: inherit;

}

.retro-shadow-dither::after {
    content: '';
    position: absolute;

    /* offset the “shadow” */
    z-index: -2;

    /* 8px down & right of the box’s top/left boundary */
    top: 7px;
    left: 7px;
    /* extend it so it still covers the full bottom/right */
    right: -7px;
    bottom: -7px;

    /* push behind */
    background-repeat: repeat;
    background-image: var(--shadow-texture, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGP8////fwYkwITMIU4AAAZdBATO5G0jAAAAAElFTkSuQmCC'));
    image-rendering: var(--image-pixelated, auto);

    background-size: 4px 4px;
}

.retro-shadow-dither-sm::after {
    content: '';
    position: absolute;

    /* offset the “shadow” */
    z-index: -2;

    /* 8px down & right of the box’s top/left boundary */
    top: 5px;
    left: 5px;
    /* extend it so it still covers the full bottom/right */
    right: -5px;
    bottom: -5px;

    /* push behind */
    background-repeat: repeat;
    background-image: var(--shadow-texture, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGP8////fwYkwITMIU4AAAZdBATO5G0jAAAAAElFTkSuQmCC'));
    image-rendering: var(--image-pixelated, auto);

    background-size: 4px 4px;
}

.dither-0 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNkYGD4z4AEmJA5xAkAAEEUAQdKO6E4AAAAAElFTkSuQmCC');
}

.dither-1 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNkgID/UJqBCZkDE0ABGAIAa+kCBoZbVNEAAAAASUVORK5CYII=');
}

.dither-2 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVR4nGNkgID/UJqBCZkDE4ABRnQBsEoAcPoDBpHL2roAAAAASUVORK5CYII=');
}

.dither-3 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGNggID/MJoRiQMGTEhskCSKAFglAKRPBAOznulCAAAAAElFTkSuQmCC');
}

.dither-4 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNggID/MJoRiYMCcKsAANewBf2hf8fHAAAAAElFTkSuQmCC');
}

.dither-5 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNggID/yDQyB8ZGCDIii4KEACFCB/rOBeNqAAAAAElFTkSuQmCC');
}

.dither-6 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGNggID/yDQyB8ZGCDIiizIwMDACACFDB/s7/XsLAAAAAElFTkSuQmCC');
}

.dither-7 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNggID/yDQKBwbggoxoMowA/lcG/DBsgmIAAAAASUVORK5CYII=');
}

.dither-8 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNggID/yDQKBwZwqwAAA08H+ePt+y4AAAAASUVORK5CYII=');
}

.dither-9 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNgQAX/4QQSjcLBVAEAx3wG+tCzOsQAAAAASUVORK5CYII=');
}

.dither-10 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVR4nGNgQAX/4QQSjZsDpgG1jgX7/eHZnQAAAABJRU5ErkJggg==');
}

.dither-11 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgwAL+o9G4OWAaAIHCBPz56KPPAAAAAElFTkSuQmCC');
}

.dither-12 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEUlEQVR4nGNgwAL+o9EEVAAAZ9wD/cOfYBwAAAAASUVORK5CYII=');
}

.dither-13 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEElEQVR4nGNgwAP+E5QB0wA5CwL+Ncf2agAAAABJRU5ErkJggg==');
}

.dither-14 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVR4nGNgwAP+EycDADQQAf+eAmX9AAAAAElFTkSuQmCC');
}

.dither-15 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVR4nGNgIAv8R+YBAA03AQDv+27jAAAAAElFTkSuQmCC');
}

.dither-16 {
    --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADElEQVR4nGNgoBwAAABEAAHX40j9AAAAAElFTkSuQmCC');
}

.retro-bevel-outset {
    border: outset 2px #cfcfcf;
}

.retro-bevel-inset {
    border: inset 2px #cfcfcf;
}

.retro-button-default {
    background-color: #f0f0f0;
    border-top: 2px solid #cfcfcf;
    border-left: 2px solid #e0e0e0;
    border-right: 2px solid #8a8a8a;
    border-bottom: 2px solid #5a5a5a;
    padding: 0.5em 0.7em;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
    box-sizing: content-box;
}

.retro-button-default:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.retro-button-default:active {
    background-color: #f0f0f0;
    border-top: 2px solid #8a8a8a;
    border-left: 2px solid #5a5a5a;
    border-right: 2px solid #cfcfcf;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
}

.retro-button-3d {
    background: linear-gradient(0deg, #d1d1d1 35%, #f1f1f1 65%, #dddddd 90%);
    image-rendering: var(--image-pixelated, auto);
    border-top: 2px solid #cfcfcf;
    border-left: 2px solid #e0e0e0;
    border-right: 2px solid #8a8a8a;
    border-bottom: 2px solid #5a5a5a;
    padding: 0.5em 0.7em;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
    box-sizing: content-box;
}

.retro-button-stark {
    background-color: #ffffff;
    border-top: 2px solid #cfcfcf;
    border-left: 2px solid #e0e0e0;
    border-right: 2px solid #8a8a8a;
    border-bottom: 2px solid #5a5a5a;
    padding: 0.5em 0.7em;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
    box-sizing: content-box;
    color: #000000;
}

.retro-button-stark:hover {
    background-color: #b4b4b4;
    cursor: pointer;
}

.retro-button-stark:active {
    background-color: #000000;
    border-top: 2px solid #8a8a8a;
    border-left: 2px solid #5a5a5a;
    border-right: 2px solid #cfcfcf;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
    color: #ffffff;
}

.retro-button-3d {
    background: linear-gradient(0deg, #d1d1d1 35%, #f1f1f1 65%, #dddddd 90%);
    image-rendering: var(--image-pixelated, auto);
    border-top: 2px solid #cfcfcf;
    border-left: 2px solid #e0e0e0;
    border-right: 2px solid #8a8a8a;
    border-bottom: 2px solid #5a5a5a;
    padding: 0.5em 0.7em;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
    box-sizing: content-box;
}


.retro-button-3d:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.retro-button-3d:active {
    background-color: #f0f0f0;
    border-top: 2px solid #8a8a8a;
    border-left: 2px solid #5a5a5a;
    border-right: 2px solid #cfcfcf;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.2);
    /* subtle shadow */
}

.retro-input {
    font-family: monospace;
    font-size: 0.9rem;
    background-color: #f1f1f1;
    color: #000;
    padding: 4px 6px;
    border: 1px solid #000;
    outline: none;
    box-sizing: border-box;
    box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.1);
    /* subtle inset shadow */
}

/* on focus, pop it “out” */
.retro-input:focus {
    border: 2px solid #000;
    background-color: #fcfcfc;
}

/* Text effects */

.retro-loading-text {
    font-size: 1.2rem;
    position: relative;
}

/* Create a pseudo‐element to hold the dots */
.retro-loading-text::after {
    content: "";
    display: inline-block;
    width: 1em;
    /* Reserve space for up to three dots */
    text-align: left;
    animation: dots 1s steps(4, end) infinite;
}

/* Cycle through "", ".", "..", "..." and back to "" */
@keyframes dots {

    0%,
    20% {
        content: "";
    }

    25%,
    45% {
        content: ".";
    }

    50%,
    70% {
        content: "..";
    }

    75%,
    95% {
        content: "...";
    }

    100% {
        content: "";
    }
}

.retro-ticker {
    width: 100%;
    /* or any fixed width you want, e.g. 400px */
    height: 2rem;
    /* adjust as needed for your font-size */
    overflow: hidden;
    /* hide the overflowing text */
    display: flex;
    align-items: center;
    /* vertical‐center the text */
    box-sizing: border-box;
    padding: 0 1rem;
    /* optional padding on left/right */
}

/* The moving text: */
.retro-ticker-content {
    display: inline-block;
    white-space: nowrap;
    /* keep all text on one line */
    padding-left: 100%;
    /* start “off‐screen” to the right */
    animation: ticker-animation 20s linear infinite;
}

/* Keyframes: from fully right (padding-left:100%) to fully left (translateX to -100% of its own width) */
@keyframes ticker-animation {
    0% {
        transform: translateX(20%);
    }

    /* starting point: off‐screen right */
    100% {
        transform: translateX(-120%);
    }

    /* ending point: completely scrolled past left */
}

/* Retro Spinners */

.retro-spinner-primary,
.retro-spinner-primary-round {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
}

.retro-spinner-primary::before, 
.retro-spinner-primary-round::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 1;
    background: conic-gradient(
        rgba(255, 51, 0, 1) 0deg 90deg,
        rgba(102, 204, 51, 1) 90deg 180deg,
        rgba(255, 204, 0, 1) 180deg 270deg,
        rgba(2, 165, 255, 1) 270deg 360deg
    );
    transform-origin: center;  /* rotate around its own center */
    animation: spin8step 1s linear infinite;
}

.retro-spinner-primary-round:after {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    content: '';
    z-index: 2;
    border-top: 5px solid rgba(255, 255, 255, 0.9);
    border-bottom: 5px solid rgba(20, 20, 20, 0.7);
    filter: blur(2px);
    transform: rotate(-45deg);
}

.retro-spinner-black,
.retro-spinner-black-round {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
}

.retro-spinner-black::before, 
.retro-spinner-black-round::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: 1;
    background: conic-gradient(rgba(0, 0, 0, 1) 0deg 45deg,
            rgba(0, 0, 0, 0.875) 45deg 90deg,
            rgba(0, 0, 0, 0.75) 90deg 135deg,
            rgba(0, 0, 0, 0.625) 135deg 180deg,
            rgba(0, 0, 0, 0.5) 180deg 225deg,
            rgba(0, 0, 0, 0.375) 225deg 270deg,
            rgba(0, 0, 0, 0.25) 270deg 315deg,
            rgba(0, 0, 0, 0.125) 315deg 360deg);
    transform-origin: center;  /* rotate around its own center */
    animation: spin8step 1s linear infinite;
}

.retro-spinner-black-round:after {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    content: '';
    z-index: 2;
    border-top: 5px solid rgba(255, 255, 255, 0.9);
    border-bottom: 5px solid rgba(20, 20, 20, 0.7);
    filter: blur(2px);
    transform: rotate(-45deg);
}

.retro-spinner-simple {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;

    border-radius: 50%;
    border: 2px solid #000;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);

    
}

.retro-spinner-simple::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: conic-gradient(rgba(0, 0, 0, 1) 0deg 90deg,
            rgba(64, 64, 64, 1) 90deg 180deg,
            rgba(128, 128, 128, 1) 180deg 270deg,
            rgba(255, 255, 255, 1) 270deg 360deg);
    transform-origin: center;  /* rotate around its own center */
    animation: spin8step 1s linear infinite;

}

@keyframes spin4step {
    0% {
        transform: rotate(0deg);
    }

    24% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(90deg);
    }

    49% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    74% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    99% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin8step {
    0% {
        transform: rotate(0deg);
    }

    12.4% {
        transform: rotate(0deg);
    }

    12.5% {
        transform: rotate(45deg);
    }

    24.9% {
        transform: rotate(45deg);
    }

    25% {
        transform: rotate(90deg);
    }

    37.4% {
        transform: rotate(90deg);
    }

    37.5% {
        transform: rotate(135deg);
    }

    49.9% {
        transform: rotate(135deg);
    }

    50% {
        transform: rotate(180deg);
    }

    62.4% {
        transform: rotate(180deg);
    }

    62.5% {
        transform: rotate(225deg);
    }

    74.9% {
        transform: rotate(225deg);
    }

    75% {
        transform: rotate(270deg);
    }

    87.4% {
        transform: rotate(270deg);
    }

    87.5% {
        transform: rotate(315deg);
    }

    99.9% {
        transform: rotate(315deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Dark Mode adjustments */
@media (prefers-color-scheme: dark) {
    .dither-black-alpha-0 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGP8////fwYkwITMIU4AAAZdBATO5G0jAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-black-alpha-1 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNkYGBg+P///38QDQJMyBywADIHqwAAt6sIACSvv9QAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-black-alpha-2 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAI0lEQVR4nGNkYGBg+P///38QDQJMyBywAIzByMjIiCIAUwkA0e8MAA4smFoAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-black-alpha-3 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVR4nGNgYGBg+P///38YzQjjwAATjMHIyMiIIgBTCQCmsQ/6VXGFxQAAAABJRU5ErkJggg==');
        background-size: 4px 4px;
    }

    .dither-black-alpha-4 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGNgYGBg+P///38YzQjjoAC8KgCBMRfr1aA+rQAAAABJRU5ErkJggg==');
        background-size: 4px 4px;
    }

    .dither-black-alpha-5 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNgYGBg+P///384jcyBsVEEGeGiUAAAs9kf4hvA86wAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-black-alpha-6 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIUlEQVR4nFWIuREAAAiDYP+hY2VOKx4AkqS8sf6mvYDqALPjH+ZQDGI/AAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-black-alpha-7 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVR4nGNgYGBg+P///384jcKBAWRBRmQZRkZGRgAidRvq0P6/KgAAAABJRU5ErkJggg==');
        background-size: 4px 4px;
    }

    .dither-black-alpha-8 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNgYGBg+P///384jcKBAbwqADxAH+GoUSnkAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-black-alpha-9 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNgQAL/////DyFgHBQZXCoARycb5cPC7FwAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-black-alpha-10 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGNgQAL/////DyFgHBQZdA5MEAD5ZhfpGO8HVwAAAABJRU5ErkJggg==');
        background-size: 4px 4px;
    }

    .dither-black-alpha-11 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFklEQVR4nGNgQAf/////j0yjCGJVAQAkPBPt5nDDIgAAAABJRU5ErkJggg==');
        background-size: 4px 4px;
    }

    .dither-black-alpha-12 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNgQAf/////j0xjAnQVALabD/FPsIgjAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-black-alpha-13 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNgwAX+////H78MTAUA9U4L9TRz5JEAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-black-alpha-14 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgwAX+////nzgZANtoB/nMzByQAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-black-alpha-15 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgIB38////P7IAADoKA/0lPq4eAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-black-alpha-16 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADElEQVR4nGNgoBwAAABEAAHX40j9AAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-0 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNkYGD4z4AEmJA5xAkAAEEUAQdKO6E4AAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-1 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNkgID/UJqBCZkDE0ABGAIAa+kCBoZbVNEAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-white-alpha-2 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVR4nGNkgID/UJqBCZkDE4ABRnQBsEoAcPoDBpHL2roAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-white-alpha-3 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGNggID/MJoRiQMGTEhskCSKAFglAKRPBAOznulCAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-4 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNggID/MJoRiYMCcKsAANewBf2hf8fHAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-5 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNggID/yDQyB8ZGCDIii4KEACFCB/rOBeNqAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-6 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVR4nGNggID/yDQyB8ZGCDIiizIwMDACACFDB/s7/XsLAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-7 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNggID/yDQKBwbggoxoMowA/lcG/DBsgmIAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-white-alpha-8 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNggID/yDQKBwZwqwAAA08H+ePt+y4AAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-white-alpha-9 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNgQAX/4QQSjcLBVAEAx3wG+tCzOsQAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-white-alpha-10 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVR4nGNgQAX/4QQSjZsDpgG1jgX7/eHZnQAAAABJRU5ErkJggg==');
        background-size: 4px 4px;
    }

    .dither-white-alpha-11 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgwAL+o9G4OWAaAIHCBPz56KPPAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-12 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEUlEQVR4nGNgwAL+o9EEVAAAZ9wD/cOfYBwAAAAASUVORK5CYII=');
        background-size: 4px 4px;
    }

    .dither-white-alpha-13 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEElEQVR4nGNgwAP+E5QB0wA5CwL+Ncf2agAAAABJRU5ErkJggg==');
        background-size: 4px 4px;
    }

    .dither-white-alpha-14 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVR4nGNgwAP+EycDADQQAf+eAmX9AAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-15 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVR4nGNgIAv8R+YBAA03AQDv+27jAAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    .dither-white-alpha-16 {

        background-repeat: repeat;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADElEQVR4nGNgoBwAAABEAAHX40j9AAAAAElFTkSuQmCC');
        background-size: 4px 4px;
    }

    /* Shadow styles for dark mode */
    .retro-shadow-default {
        box-shadow: 10px 10px 0px #ffffff;
    }

    .retro-shadow-sm {
        box-shadow: 5px 5px 0px #ffffff;
    }

    .retro-shadow-xs {
        box-shadow: 2px 2px 0px #eeeeee;
    }

    .retro-inverse-shadow-default {
        box-shadow: 10px 10px 0px #000000;
    }

    .retro-inverse-shadow-sm {
        box-shadow: 5px 5px 0px #000000;
    }

    .retro-inverse-shadow-xs {
        box-shadow: 2px 2px 0px #111111;
    }

    /* Bevel styles for dark mode */
    .retro-bevel-outset {
        border: outset 2px #505050;
    }

    .dither-0 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGP8////fwYkwITMIU4AAAZdBATO5G0jAAAAAElFTkSuQmCC');
    }

    .dither-1 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNkYGBg+P///38QDQJMyBywADIHqwAAt6sIACSvv9QAAAAASUVORK5CYII=');
    }

    .dither-2 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAI0lEQVR4nGNkYGBg+P///38QDQJMyBywAIzByMjIiCIAUwkA0e8MAA4smFoAAAAASUVORK5CYII=');
    }

    .dither-3 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVR4nGNgYGBg+P///38YzQjjwAATjMHIyMiIIgBTCQCmsQ/6VXGFxQAAAABJRU5ErkJggg==');
    }

    .dither-4 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGNgYGBg+P///38YzQjjoAC8KgCBMRfr1aA+rQAAAABJRU5ErkJggg==');
    }

    .dither-5 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHUlEQVR4nGNgYGBg+P///384jcyBsVEEGeGiUAAAs9kf4hvA86wAAAAASUVORK5CYII=');
    }

    .dither-6 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIUlEQVR4nFWIuREAAAiDYP+hY2VOKx4AkqS8sf6mvYDqALPjH+ZQDGI/AAAAAElFTkSuQmCC');
    }

    .dither-7 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVR4nGNgYGBg+P///384jcKBAWRBRmQZRkZGRgAidRvq0P6/KgAAAABJRU5ErkJggg==');
    }

    .dither-8 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNgYGBg+P///384jcKBAbwqADxAH+GoUSnkAAAAAElFTkSuQmCC');
    }

    .dither-9 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR4nGNgQAL/////DyFgHBQZXCoARycb5cPC7FwAAAAASUVORK5CYII=');
    }

    .dither-10 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGUlEQVR4nGNgQAL/////DyFgHBQZdA5MEAD5ZhfpGO8HVwAAAABJRU5ErkJggg==');
    }

    .dither-11 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFklEQVR4nGNgQAf/////j0yjCGJVAQAkPBPt5nDDIgAAAABJRU5ErkJggg==');
    }

    .dither-12 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNgQAf/////j0xjAnQVALabD/FPsIgjAAAAAElFTkSuQmCC');
    }

    .dither-13 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR4nGNgwAX+////H78MTAUA9U4L9TRz5JEAAAAASUVORK5CYII=');
    }

    .dither-14 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgwAX+////nzgZANtoB/nMzByQAAAAAElFTkSuQmCC');
    }

    .dither-15 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgIB38////P7IAADoKA/0lPq4eAAAAAElFTkSuQmCC');
    }

    .dither-16 {
        --shadow-texture: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADElEQVR4nGNgoBwAAABEAAHX40j9AAAAAElFTkSuQmCC');
    }

    .retro-bevel-inset {
        border: inset 2px #505050;
    }

    /* Additional dark mode specific classes */
    .dark-retro-bevel-outset {
        border: outset 2px #505050;
    }

    .dark-retro-bevel-inset {
        border: inset 2px #303030;
    }

    .dark-retro-shadow-default {
        box-shadow: 10px 10px 0px #ffffff;
    }

    .dark-retro-shadow-sm {
        box-shadow: 5px 5px 0px #ffffff;
    }

    .dark-retro-shadow-xs {
        box-shadow: 2px 2px 0px #eeeeee;
    }

    /* Dark mode buttons */
    .retro-button-default {
        background-color: #333333;
        border-top: 2px solid #555555;
        border-left: 2px solid #505050;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #1a1a1a;
        padding: 0.5em 0.7em;
        box-shadow: 2px 2px 0px rgba(255, 255, 255, 0.1);
        /* subtle light shadow */
        box-sizing: content-box;
        color: #e0e0e0;
    }

    .retro-button-default:hover {
        background-color: #3a3a3a;
        cursor: pointer;
    }

    .retro-button-default:active {
        background-color: #2a2a2a;
        border-top: 2px solid #222222;
        border-left: 2px solid #1a1a1a;
        border-right: 2px solid #555555;
        border-bottom: 2px solid #505050;
        box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.3);
        /* subtle inset shadow */
    }

    .retro-button-stark {
        background-color: #000000;
        border-top: 2px solid #b1b1b1;
        border-left: 2px solid #9b9b9b;
        border-right: 2px solid #5a5a5a;
        border-bottom: 2px solid #3b3b3b;
        padding: 0.5em 0.7em;
        box-shadow: 2px 2px 0px rgba(255, 255, 255, 0.1);
        /* subtle light shadow */
        box-sizing: content-box;
        color: #e0e0e0;
    }

    .retro-button-stark:hover {
        background-color: #222222;
        cursor: pointer;
    }

    .retro-button-stark:active {
        background-color: #ffffff;
        border-top: 2px solid #222222;
        border-left: 2px solid #1a1a1a;
        border-right: 2px solid #555555;
        border-bottom: 2px solid #505050;
        box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.3);
        /* subtle inset shadow */
        color: #000000;
    }


    .retro-button-3d {
        background: linear-gradient(0deg, #2a2a2a 35%, #3f3f3f 65%, #333333 90%);
        image-rendering: var(--image-pixelated, auto);
        border-top: 2px solid #555555;
        border-left: 2px solid #505050;
        border-right: 2px solid #222222;
        border-bottom: 2px solid #1a1a1a;
        padding: 0.5em 0.7em;
        box-shadow: 2px 2px 0px rgba(255, 255, 255, 0.1);
        /* subtle light shadow */
        box-sizing: content-box;
        color: #e0e0e0;
    }

    .retro-button-3d:hover {
        background-color: #3a3a3a;
        cursor: pointer;
    }

    .retro-button-3d:active {
        background-color: #2a2a2a;
        border-top: 2px solid #222222;
        border-left: 2px solid #1a1a1a;
        border-right: 2px solid #555555;
        border-bottom: 2px solid #505050;
        box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.3);
        /* subtle inset shadow */
    }

    .retro-input {
        font-family: monospace;
        font-size: 0.9rem;
        background-color: #252525;
        color: #fff;
        padding: 4px 6px;
        border: 1px solid #606060;
        outline: none;
        box-sizing: border-box;
        box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.3);
        /* darker inset shadow for dark mode */
    }

    /* on focus, pop it "out" */
    .retro-input:focus {
        border: 2px solid #808080;
        background-color: #303030;
    }

}