<!-- gelli's html code :3

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠖⠚⠒⠲⠤⠤⠤⣤⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⠤⠤⠤⠤⠒⠒⠲⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠳⠢⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡀⠴⠖⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠨⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠏⢠⣄⡀⠀⠀⠈⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠈⠲⠄⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⠤⠀⠀⠀⡄⠀⣸⠁⠀⠀⠀⠈⡇⠀⢠⠆⠀⠀⠤⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠠⠖⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⢀⣢⡀⠹⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡗⠀⠀⠈⠙⠲⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠒⢄⣀⠀⢀⠠⠀⢢⠀⠀⢹⠄⠀⠀⠀⠀⡿⠤⢙⠀⠀⠸⠀⠀⠃⠴⢼⠀⠀⠄⠀⠀⣿⠀⠀⡔⠀⠤⣀⠀⣀⡠⠒⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡷⠚⠁⢐⠀⢹⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢼⡇⠀⠃⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢨⠋⠁⠀⠀⠀⡆⠀⡠⢧⠀⠀⢃⠀⡇⠀⠀⡆⠀⢰⠀⢠⠁⠀⢸⠀⠰⠀⠀⠸⢅⡀⣴⠁⠀⡀⠀⠹⠍⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⢸⡷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⠈⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡀⠀⠀⢆⠀⠀⠢⠀⠸⡀⠀⠘⡄⠀⠸⠀⣇⠀⣀⣧⣀⣀⣀⣸⣀⠀⢸⠀⡇⠀⢠⠃⠀⠀⠇⠀⡔⠀⠀⡠⠁⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⠁⠀⠀⠀⠀⠀⠀⠀⢸⡷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⡷⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣆⠀⠀⠀⠀⠀⠀⠀⠀⡠⠊⠀⠀⠡⣀⠀⠀⠢⡀⠀⠡⡀⢃⣀⣠⣼⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣦⣄⣀⡸⠀⠌⠀⢀⡔⠠⠀⢀⠜⠀⡀⠑⢀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⢼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⢇⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠛⢷⡄⠀⠀⠀⠀⠀⠘⠀⠀⠀⠡⡀⢡⠀⠀⠀⣈⣤⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣤⣊⠀⠀⠀⡜⢀⠌⠀⠀⢀⠃⠀⠀⠀⠀⠀⢀⡾⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡸⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣆⡠⠂⠑⠄⡀⠈⠢⡀⠀⠐⡀⣣⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢿⠿⠿⠿⠿⠿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⣔⠁⠊⠀⢀⠔⠁⢀⢀⠊⠐⠀⣰⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠋⠀⠀⡀⠈⢄⠀⠀⠈⢢⣴⣿⣿⣿⣿⣿⣿⣿⣿⠿⢿⢻⠋⠉⠉⡁⠀⠀⠘⡆⠀⠀⠀⢠⠇⠐⠀⢈⠉⠉⠙⡛⡻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡔⠁⠀⠀⡠⠃⢀⠔⠀⠙⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢑⡀⠀⠈⠂⡈⢆⣠⣾⣿⣿⣿⣿⣿⠿⡟⠋⠁⢹⠀⠀⡀⢣⠀⠀⡇⠀⠀⠀⢣⠀⠀⠀⡸⠀⠀⠀⢸⠀⠀⡜⠁⠁⠀⡇⠈⠙⢻⠿⣿⣿⣿⣿⣿⣷⣄⡰⠁⡐⠁⠀⢀⡔⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⡄⠀⠀⠀⠀⠀⠀⢀⠐⠃⢀⡠⠊⠀⠢⢄⠀⣱⣾⣿⣿⣿⣿⠿⡋⠀⢂⠈⠢⡀⠀⡇⠀⠁⡀⢣⠀⢣⡀⠤⠄⠸⣄⣀⣀⡇⠤⠄⢀⣸⠀⡜⢀⠘⠀⢰⠁⢀⠔⠁⡀⠀⢙⠿⢿⣿⣿⣿⣷⣎⠀⣀⠔⠁⠐⠄⣀⠔⠂⡀⠀⠀⠀⠀⠀⠰⢠⣾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣧⠀⠀⠀⠀⠀⢠⠁⠀⢀⠈⠳⡀⠀⠀⣠⣿⣿⣿⣿⡟⢏⡀⠀⠱⡀⠀⠃⣀⣈⣄⣸⠔⠉⠀⠉⠑⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠊⠉⠁⠉⠢⣇⣠⣊⣀⠀⠀⢀⠎⠀⠀⡹⢻⢿⣿⣿⣿⣄⠀⠀⢀⠜⠁⡀⠀⠈⠄⠀⠀⠀⠀⠀⢸⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⡄⢂⠀⠀⠀⠢⡀⠀⠀⢅⠠⡈⢢⣼⣿⣿⣿⠿⡀⠈⠠⠉⠢⡀⠱⡤⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⢤⠎⢀⡔⠊⠀⠁⠀⡿⢿⣿⣿⣷⡄⢋⠄⠊⠀⠀⢀⠜⠀⠀⠀⡰⢀⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣧⡈⡤⠄⠀⠀⠀⠑⠢⣀⠀⣸⣿⣿⡿⢏⠀⠀⠱⡀⢠⠆⠁⠙⠒⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠐⠉⠁⠐⡄⢀⠞⠀⠀⢹⢿⣿⣿⣧⠀⣀⠤⠒⠀⠀⠀⡠⢴⢁⣬⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⠇⠀⠀⠈⠢⢈⠀⠀⢀⣼⣿⣿⠏⠉⠀⠙⢢⣄⠙⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⡎⣀⠔⠊⠠⠊⠹⣿⣿⣧⡀⠀⠀⢈⠔⠂⠀⠀⠙⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣤⣼⠀⠀⠀⠑⢠⠀⢣⠀⣾⣿⣿⠋⠑⡄⠀⡔⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⢢⠀⢠⡎⠙⣿⣿⣷⠀⡔⠁⡄⠊⠁⠀⠀⣵⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⣿⣷⠢⢀⡀⠈⠀⣽⣿⡿⡓⠀⡀⠘⢲⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⠀⠀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⠀⡦⠊⢀⠠⠘⢻⣿⣯⡀⠁⠀⡀⠄⣶⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣿⣿⣿⣿⣿⣄⠈⠑⣾⣿⡟⢄⠈⠠⣌⣱⣦⣄⠀⠀⡐⠀⠀⢠⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜⠀⠀⠀⡜⢀⠃⢸⠀⠀⢁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⠀⠀⢡⠀⠀⣠⣵⣆⣁⠀⠁⡠⠻⣿⣷⠒⠉⣠⣾⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣧⣼⣿⣏⣠⣤⣷⣿⣿⣿⣿⣿⠃⠀⠁⠀⠀⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⠁⠀⠀⢠⠀⡌⠀⣼⡆⠀⠸⠐⠈⢆⠀⠀⠀⠀⠀⠀⠀⠰⠀⠈⡀⠀⠀⡀⠀⣿⣿⣿⣿⣿⣶⣦⣄⣹⣿⣧⣴⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⢨⠀⠀⢰⠁⠀⠆⠀⠀⠀⠀⠀⠀⢠⠀⠆⠀⠀⠄⢠⠃⡰⠀⠀⡎⠀⡌⢠⡟⣷⠀⢹⡆⠀⠀⠄⠀⠄⠀⠐⠀⠀⠀⣇⠀⣧⠀⠀⠇⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⡆⠀⠀⢿⠀⢰⠀⠀⢠⠀⡇⢸⠀⠆⡜⠀⠀⡜⢀⠃⠰⠁⠀⠰⠁⣰⠀⡞⡠⢻⣇⠈⣷⡀⢰⡈⠂⠈⡄⠀⢠⠀⠀⠘⡀⢸⡀⠀⢸⠀⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⣿⣿⣿⣿⣿⣿⣿⣿⣿⣏⠀⢀⡇⠀⠀⡆⠀⡞⠀⡄⠘⢠⠀⠃⡘⠀⢀⠆⣰⣠⠎⠠⠁⡔⠀⠀⢠⡇⡼⠱⡐⡡⢿⡆⠹⣧⠀⢳⡀⠀⡈⠄⠀⢃⠀⢰⠃⢸⡅⠀⢸⡆⠀⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⣿⣿⣿⣿⣿⣿⣿⣿⡏⠖⠀⢸⡇⠀⠀⡈⢠⠃⢀⠇⠀⡜⢡⣠⠂⢁⠎⠰⢥⠟⠀⠁⡼⠀⠀⣰⡟⡼⢁⢣⠐⣡⠊⢿⡄⢻⣧⠀⢳⣀⠷⡀⢡⠈⢆⠀⠀⣀⢣⠀⠸⠇⠀⠀⠻⣿⣿⣿⣿⣿⣿⣿⣿⠀⠺⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢏⠀⢰⣿⣿⣿⣿⣿⣿⣿⣿⣧⡔⠀⠈⠁⠠⣄⡇⠀⠀⢸⢀⣰⠁⣤⣿⣶⣌⠀⣰⠏⠀⢀⡼⠁⡀⣴⣿⠞⡡⢃⠆⡩⢄⠣⢌⠻⣎⢻⣷⣼⣿⣄⢱⡀⢣⠈⡄⣀⣿⣴⡄⠀⠁⠀⢰⣼⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠚⠋⠉⢙⡏⠛⠻⢿⣿⣿⣿⣿⠏⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠈⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣯⣀⣠⡾⠁⣠⣾⠟⡡⢊⠐⡡⠘⢄⠢⠑⣂⣥⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠏⠉⠀⠀⠀⠀⠀⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠹⣿⣿⣿⣿⡿⠟⠛⢹⡋⠉⠙⠓⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⡀⠀⠀⠀⠈⠻⣿⠏⠀⠀⠀⢘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡀⠀⠀⠀⠀⠀⣴⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣥⣼⠛⢀⠂⡁⢂⠡⠄⠃⠄⢂⣵⣾⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣦⡀⠀⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠙⣿⠟⠁⠀⠀⠀⠀⢧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠃⠀⠀⠀⠀⠄⠀⠉⠀⢀⠃⠀⡸⠿⠛⠋⠙⣛⠛⠿⠿⣿⣿⣧⠀⠀⠀⢀⣽⣿⣿⣿⣿⣏⣶⣾⣶⣾⣶⣿⣿⠿⣿⠟⠀⡐⠀⠂⠐⠀⠂⢈⠐⠈⠀⠻⢿⡿⣿⣿⣶⣷⣾⣶⣶⣭⠿⣿⣿⣿⣷⡀⠀⠀⠀⣸⣿⣿⡿⠟⠿⠛⠉⠙⠛⣿⢿⠀⠀⡄⠀⠁⠀⠀⠀⠀⠈⠄⠘⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡎⢠⠀⠀⡰⡙⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠘⡖⠢⢤⣀⣙⣻⣀⣤⣴⣿⣿⡿⠋⠀⠀⠀⢹⣿⣿⣿⣿⣿⣿⡇⡇⠀⠀⠀⠀⠈⠀⠀⠁⠀⠀⠈⠀⠀⢹⠉⠀⠀⠈⢹⣿⣿⣿⣿⣿⣿⠘⢿⣿⣿⣦⣤⣀⣟⣋⣁⡤⠄⡒⠇⠀⠀⠀⠀⠀⡇⠀⠀⠘⠀⠀⠀⢁⢃⠀⠀⠀⢸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠁⡌⠀⢠⢡⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⢰⡀⡀⠉⠛⠿⣿⣿⣿⣿⠁⠰⣦⣤⡖⢺⣿⣿⣿⣿⣿⣿⡏⡔⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣹⢱⣦⣤⡖⢻⣿⣿⣿⣿⣿⣿⠇⠘⣿⣿⣿⣿⠿⠛⠉⢀⠂⡐⢸⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠸⡀⠄⠀⡰⠀⡃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⢐⠆⢀⠣⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⢿⠘⡁⢰⠀⠀⠀⠀⠉⠻⣿⡄⠀⣿⣿⣿⢿⣻⡽⣏⡿⣿⣿⣿⠆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣸⣿⣿⣻⠿⣽⢯⣟⣿⣿⡿⠀⢠⣿⠟⠋⠀⠀⠀⠀⡜⢀⠃⡾⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⡜⡄⠠⡀⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠀⠇⠀⠠⣾⣧⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⡆⠹⡀⠇⠀⠘⡀⠀⠀⢸⠻⡄⠈⣿⢯⣟⣧⢿⣹⣽⣻⢿⣧⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⢿⡿⣷⢯⢿⣹⢾⡽⡾⣿⠁⢠⠾⡏⠀⠀⢀⠃⠀⢰⢁⡎⢰⠁⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣧⢰⠀⠐⠀⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⠈⠀⠀⢠⡇⠃⢀⣠⣶⣿⣿⣿⣿⣷⣦⡀⠀⠀⠀⠀⠀⢰⡀⣳⠘⠀⠀⠀⠀⠂⠀⡇⠈⢦⠘⣧⠻⣞⣯⠷⣞⣏⠉⣹⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡟⡇⢿⣯⣏⡿⣞⠟⡉⢁⡰⢁⢸⠁⠀⡀⠈⠀⠀⣇⣼⠀⡎⠀⠀⠀⠀⠀⢀⣴⣾⣿⣿⣿⣷⣦⣄⡀⠀⣿⣆⠃⠀⠀⢸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠀⠀⠀⠀⣼⣇⣴⣿⣿⡿⠟⠟⠟⠻⣿⣿⣿⣆⠀⢀⣴⣾⣿⣿⣿⣿⣿⣶⣦⡀⠀⠀⢳⠀⠀⠱⡸⢗⡘⢯⣿⣽⠇⣸⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣏⣇⠸⣷⣾⡽⠃⣰⢃⠜⠀⠀⡞⠀⠀⢁⣴⣾⣿⣿⣿⣿⣿⣶⣤⡀⠀⣰⣿⣿⣿⠿⠟⠛⢻⢿⣿⣿⣦⡙⣿⠀⠀⠀⠀⢧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣧⣄⡀⠀⢰⣿⣿⣿⡿⠋⡠⠂⠀⠈⠀⠈⣻⣿⣿⣦⣿⣿⣿⣿⠿⠿⠿⠿⣿⣿⣿⣦⠀⠈⣇⠂⠀⠘⣌⣳⣴⠦⣤⠾⠷⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⠦⡤⢶⣤⣞⡡⠋⠀⠀⣼⠃⠠⣶⣿⣿⣿⡿⠿⠿⠿⣿⣿⣿⣿⣦⣿⣿⡟⠁⠀⠀⠉⠐⠢⡉⣿⣿⣿⣿⡇⠀⢀⣠⣼⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣿⣷⣾⣿⣿⣿⠁⠊⠀⠀⠀⠀⠀⠀⠸⣿⣿⣿⣿⡿⠋⠡⠐⠒⠐⠂⠈⢿⣿⣿⣧⠀⠸⡄⢂⠐⣠⣼⣶⡦⡐⠌⡄⢀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⢀⠐⡐⠶⣁⠦⣄⣭⠐⠄⢂⢰⡇⠀⣼⣿⣿⡿⠁⠐⠂⠐⠒⢄⡙⢿⣿⣿⣿⣿⠁⠀⠀⠀⠀⠀⠀⠑⠸⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿⣿⣶⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⣿⣿⣿⡿⠛⣋⣙⠻⢿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⡿⠁⠀⠀⠀⠀⠀⠀⠀⠘⣿⣿⣿⡀⠀⢳⡄⠻⠯⠓⠋⠄⠱⠈⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠁⠞⡀⠓⠋⠌⠱⠈⢄⡾⠀⣰⣿⣿⣿⠅⡀⠀⠀⠀⠀⠀⠈⠉⢿⣿⣿⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⡿⠟⢋⣙⠛⢿⣿⣿⣷⣵⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⣿⣿⣿⠏⡠⠊⠀⠀⠀⠉⢿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⢀⣼⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠁⠂⠈⣿⡆⠀⠁⠈⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠰⣶⢶⣶⠆⠀⠀⠀⠀⠀⠀⠈⠀⠀⠁⠈⠀⠀⣰⡾⠁⠀⠁⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⡿⠁⠀⠀⠀⠉⢄⢹⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⣿⣿⣿⢠⠁⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣦⣀⡀⢀⣀⣴⣾⣿⣿⣿⣿⣿⡀⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⣶⣶⣶⣬⣿⡢⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢧⣀⡼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣼⣿⣥⣶⣶⣶⣿⣿⣿⣿⣄⠀⠀⠀⠀⠀⠀⢀⣾⣿⣿⣿⣿⣷⣆⣀⠀⣀⣠⣴⣿⣿⣿⣿⡇⡀⠀⠀⠀⠀⠀⠁⣿⣿⣿⣯⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⠈⠀⠀⠀⠀⠀⠀⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⢿⣿⣿⣿⣦⣄⣠⣤⣤⣾⣿⣿⣿⣿⡿⠿⠿⢿⣿⣿⣷⣄⠙⠢⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠴⠋⣹⣿⣿⣿⡿⠿⠿⢿⣿⣿⣿⣿⣶⣤⣤⣠⣤⣴⣿⣿⣿⠿⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠋⠁⠀⠀⠀⠤⣉⠿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁⠐⠂⠒⠢⢌⢻⣿⣿⡆⠀⠀⠙⣢⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⣖⡋⠁⠀⣰⣿⣿⡿⢁⠔⠂⠒⠢⠈⢻⣿⣿⣿⣿⣿⣿⣿⣿⡿⢋⠁⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⣴⣿⣿⣿⣿⡃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣿⣿⣿⣿⣿⣦⣴⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠈⠢⡉⣿⣿⣿⣿⣿⣿⡏⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⡇⠀⢹⡟⠒⢢⣤⠤⣀⣀⣀⠤⣤⡔⠒⠻⡏⠁⢸⠇⠀⠀⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣿⣿⣿⢋⠌⠁⠀⠀⠀⠀⠀⠀⠀⠙⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣤⣶⣿⣿⣿⣿⣿⣯⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠟⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⢸⣿⣿⣿⣿⣿⡀⠀⠀⠀⠀⠀⠀⢀⣾⣿⣿⢻⡀⠀⠀⠸⣀⠋⣱⣷⣮⣳⢠⢀⠛⡄⡆⣜⣿⣾⣾⠹⣄⡎⠀⠀⢀⡟⣿⣿⣷⡀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⣿⣿⡃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢋⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⣿⣿⣷⡀⠀⠀⠀⢀⣠⣾⣿⣿⡏⠀⢳⡄⠀⣸⣿⣿⣿⣿⣿⣿⣿⣴⣤⣤⣿⣿⣿⣿⣿⣿⣿⣇⡀⢀⡜⠀⠹⣿⣿⣷⣄⡀⠀⠀⠀⣠⣾⣿⣿⣿⣿⠗⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠢⡉⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⠛⠔⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠌⡙⢿⣿⣿⣿⣷⣶⣿⣿⣿⣿⣿⡿⢄⠀⠀⠺⢏⢘⠛⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠛⡣⣘⠋⠀⠀⣠⢽⣿⣿⣿⣿⣷⣶⣿⣿⣿⣿⡿⠛⠡⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢢⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⠠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠈⢻⣿⣿⣿⣿⣿⣿⣿⣿⠟⠁⠀⣉⣦⣄⠉⠲⠎⠈⢨⣿⣿⣿⣿⣿⠛⣿⣿⣿⣿⣿⡇⠁⠰⡖⠋⣠⣶⣋⠁⠀⠻⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⡿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⣿⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⠿⠧⠤⡴⣊⠳⡒⢬⢛⡲⢵⣦⢿⣿⣿⣿⣿⣿⠤⣿⣿⣿⣿⣿⣿⣦⡾⢖⢫⠕⣢⠒⡕⢦⡄⢼⠿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢿⣿⣿⣿⣿⣿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⡿⠣⠄⠀⢸⠑⠚⠧⢭⣂⣣⢣⣿⣿⣿⣿⣿⣿⣿⣏⠲⣹⣿⣿⣿⣿⣿⣿⣷⡩⢆⣙⡤⠿⠚⠐⣇⠀⠄⠈⢿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣿⣿⣿⣿⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣿⣿⣿⣿⣿⣿⣿⣶⣤⣤⣤⣤⣶⣿⣿⣿⣿⣷⣀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣿⡿⠋⠠⠤⡆⠀⡏⠀⠀⠀⠀⠀⠉⠛⠻⣭⣭⠩⣍⡛⢿⢧⢣⡙⣿⠫⠭⡍⣭⡭⠿⠛⠉⠀⠀⠀⠀⠀⢽⠀⢱⠤⠄⢙⢿⣿⣿⣿⣄⡀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⣷⣦⣤⣤⣤⣴⣾⣿⣿⣿⣿⣿⣿⣿⡯⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣦⣤⣄⣤⣴⣶⣿⣿⣿⡿⠋⠀⠀⠀⢠⠀⢰⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠶⣉⠎⢆⢣⠚⠤⣋⠵⠚⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡇⠈⡄⠀⠀⠀⠉⢻⣿⣿⣷⣶⣤⣤⣠⣤⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡛⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⡜⠀⠘⠤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠂⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠤⠓⠀⢣⠀⠀⠀⠀⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠻⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡟⢆⠉⠛⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⠁⠀⠁⠸⠀⢀⠀⢀⠎⢠⠞⠐⠒⢤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠖⠂⠓⡄⠱⡀⠀⠀⠀⠃⠀⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠛⠡⡈⢿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡿⢄⠘⠀⠀⠘⠛⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠃⠘⠠⠤⠇⠀⡇⠀⣼⡀⡼⠀⠀⠀⢀⠇⢠⠟⠘⠤⢄⡀⢀⣀⠤⣀⡀⠀⣠⠤⠛⠸⡄⠸⡄⠀⠀⠀⢣⢀⣧⠀⠸⠀⠘⠤⠀⠘⠘⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠟⠃⠀⠀⢀⠃⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠎⢿⡀⠆⠀⠀⠀⠀⠀⠀⠈⠉⠉⠛⠛⠛⠛⠛⠛⠛⢋⣽⣿⣿⣿⣿⡟⠀⠀⠀⠀⢰⠀⠼⢀⡼⠁⢸⠇⠀⢠⢎⡉⠛⠺⢄⠀⠀⢠⠃⣏⠀⠀⠀⢸⠈⡆⠀⠀⣀⠟⠋⢉⠱⡆⠀⠸⡇⠈⢣⡀⢣⡀⡆⠀⠀⠀⠀⢻⣿⣿⣿⣿⣏⠛⠛⠛⠛⠛⠛⠛⠛⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠇⣾⠙⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠎⠀⢸⡜⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣈⠲⣾⣿⣿⣿⣿⣷⠒⠒⠂⠒⠾⢭⣵⣺⠄⣀⣾⠀⠴⢸⠀⠀⠀⠀⠀⠈⠐⠾⡤⢾⠀⢐⠀⡷⢤⡷⠒⠁⠀⠀⠀⠀⠟⡇⢰⡀⢷⣀⣠⣵⣾⡽⠷⡂⠒⠂⠀⣾⣿⣿⣿⣿⣿⡘⠠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢈⢳⡏⠀⠰⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠊⠀⠀⠀⠹⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢤⣿⣿⣿⣿⣿⡿⠛⠒⠂⢤⠊⢠⠃⡼⠀⠉⢓⠶⠭⢗⣺⠀⠀⠀⠀⣀⠀⠀⠀⠘⣶⠓⠉⠒⢷⠁⠀⠀⠀⠀⠀⠀⠀⢃⣟⣾⡿⠷⡛⠉⠁⢧⠘⡄⠐⢤⠀⠒⠛⢿⣿⣿⣿⣿⣧⠑⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣢⠟⠀⠀⠀⠘⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡰⠃⠀⠀⠔⡰⠁⢀⡟⠶⠤⢤⣀⣀⡀⢀⠀⣀⢀⣀⣠⣤⣼⣿⣿⣿⣿⣿⡟⠀⠀⠀⡀⠁⠀⠂⢠⣇⡀⡰⠃⢠⠆⡼⢸⠠⠀⠀⠀⠀⠈⠙⠻⢿⡇⠀⠀⠀⣸⡷⠋⠉⠀⠀⠀⠀⠀⢒⡏⢱⠐⡀⠈⢦⠀⠸⡄⠘⠀⠀⢂⠀⠀⠀⢹⣿⣿⣿⣿⣷⣶⣤⣀⣀⡀⣀⠀⡀⢀⣀⣀⡤⠤⠖⣾⠁⠀⠢⠱⡀⠀⠈⢦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠜⠀⠀⢀⢌⡔⠁⠀⢰⠏⠐⡉⠆⡘⠤⠩⢍⠫⢍⠭⡓⣼⣿⣿⣿⣿⣿⣿⣿⣅⣀⠤⡼⠄⡀⠀⠀⡌⠀⡜⠁⢀⠊⢠⠇⠈⣇⠀⠀⠀⠀⠀⠀⠐⣌⣳⣀⣀⣀⡟⢤⠀⠀⠀⠀⠀⠀⠀⢼⠃⠘⡆⠐⡀⠀⠣⠀⠱⠀⠀⠀⡠⠧⠄⣀⣠⣿⣿⣿⣿⣿⣿⣿⡯⡜⡩⢍⡹⢉⠍⡒⠰⠈⠅⢃⠘⣇⠀⠀⠠⠀⡀⠀⠀⠱⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⠂⠀⠀⢀⢪⠞⠀⠀⢠⡟⠀⠀⠀⠀⠀⠀⠁⠂⡁⠎⡒⡱⢺⣿⣿⣿⣿⣿⣿⣿⠃⣴⠞⠁⠀⡸⠃⣴⠀⠠⡀⠀⠂⠀⡆⠀⠀⢻⡐⡀⠀⠀⢀⣠⡳⢞⠡⡞⠈⢳⢘⠳⢮⣄⠀⠀⠀⠠⣘⡟⠀⠀⢰⠀⠐⠀⠀⡀⠀⢦⠀⢃⠀⠀⠣⠢⣈⣿⣿⣿⣿⣿⣿⣿⡗⠬⡑⠢⠐⠈⠀⠀⠁⠈⠀⠀⠀⢹⠀⠀⠀⠀⠌⠄⠀⠀⠈⠆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠜⠀⠀⠀⠠⡾⠋⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⠀⡐⠤⢡⠱⣹⣿⣿⣿⣿⣿⣿⢁⠔⠁⠀⠀⣰⠁⠰⠁⠀⢰⠀⢸⠒⠀⡇⠀⡰⢋⡱⠂⠓⠒⠉⠀⠁⠎⣸⠇⠀⠘⡌⠒⡁⠈⠉⠓⠒⢓⠫⠜⣆⠀⠸⠀⠐⡇⠀⡇⠀⠀⠂⠀⢆⠀⠀⠀⠂⠨⢿⣿⣿⣿⣿⣿⣏⢒⡡⠡⢈⠀⠀⠀⠀⠀⠀⠀⠀⠈⡇⠠⠀⠀⠀⠈⠂⠀⠀⠀⠱⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⠂⠀⠀⠀⢀⠜⢁⠁⢀⡌⢀⡾⠀⠀⠀⠀⠀⠀⠀⠀⠀⡐⢈⠆⡓⢼⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀⣰⠇⢠⠃⠀⠀⡞⠀⡎⠀⢠⢀⡜⠡⠊⠀⠀⠀⠀⠀⠀⠈⢰⣸⠀⡆⠀⣧⠃⠀⠀⠀⠀⠀⠀⠁⠃⠌⢳⡀⡇⠀⢻⠀⢰⠀⠀⠘⡄⠘⢃⠀⠀⠀⢀⣼⣿⣿⣿⣿⣿⡇⢎⡰⢁⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⢳⡀⠑⡀⠀⠀⠀⢀⠀⠀⠀⠘⢄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠜⠀⠀⠀⠀⡐⠈⠠⠃⠀⠰⠁⢼⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠄⢃⠜⡘⣼⣿⣿⣿⣿⣿⣿⣿⣦⣄⡰⠉⠀⠎⣀⠀⢰⡇⢰⠃⠀⢸⠋⠄⠁⠀⠀⠀⠀⠀⠀⠀⠀⢂⡇⠀⣿⠀⢹⠐⡀⠀⠀⠀⠀⠀⠀⠀⠈⢠⠙⣇⠀⠘⡆⠀⡇⠈⠀⠰⠀⢀⢆⣀⣴⣾⣿⣿⣿⣿⣿⣿⣏⠒⡄⠃⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠈⠆⠀⠀⠀⠀⠀⠀⠱⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡠⠂⡔⠁⠠⠂⠈⠀⣠⠁⠀⠠⢁⠆⡼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠌⢢⢘⡡⢺⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣶⣤⣼⣄⣊⡀⣠⠃⠌⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣘⠃⠀⡅⠀⠈⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢂⡘⢆⣀⣘⣀⣭⣤⣾⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡧⣉⠆⡩⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢧⠱⡀⢂⠀⠀⢆⠀⠑⠈⠄⠀⠀⠘⢆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⡐⢁⠎⠀⢠⠀⠀⠀⣰⠃⠀⠀⠁⡌⢀⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠌⡐⠢⣅⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⢡⠌⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⢼⠀⣀⣤⣀⠀⡇⡐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠔⡈⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡗⠤⡃⠔⡁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⡀⢱⠀⠀⠀⠘⢆⠀⠀⠀⠄⠀⠑⠀⠣⡀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⠎⢀⠁⠀⢀⠆⠀⠀⣰⠇⠀⠀⠂⡜⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠂⡅⠓⡤⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⣬⣦⣶⣶⣶⣶⣎⣀⠑⠲⢤⢤⣀⡡⢺⣿⣿⣿⣿⣿⣇⢐⣂⣤⡤⠶⠂⣁⣸⣶⣶⣶⣮⣴⣬⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣏⠒⡅⢊⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢷⠀⢣⠈⠄⠀⠘⣆⠀⠀⠐⠀⠄⠠⡀⠱⡀⠀⠀⠀⠀
⠀⠀⠀⠀⢠⠂⢀⠂⢠⠀⠈⠀⠀⠀⠉⠀⠀⠀⢠⠁⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠡⢌⡑⠦⣹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠄⠀⣀⠸⣷⣦⣉⠛⠻⣿⣿⣿⠟⠛⣫⣴⣾⡗⢀⡀⠠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡧⣉⠆⡡⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡆⠀⠆⠀⠀⠀⠘⢆⠀⠀⢀⠈⡄⠐⡄⠸⢄⠀⠀⠀
⠀⠀⠀⡠⠁⣠⠃⢠⠃⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⠀⡸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡐⢢⠘⢆⣿⡙⠻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠗⠀⠀⠈⣿⣿⣿⣿⡶⠄⢋⠠⢶⣿⣿⣿⣿⠀⠀⠈⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠿⠟⢋⣿⠰⡘⢄⠡⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢧⠀⠸⡀⢣⠀⠀⠘⡆⠀⠈⡆⢸⣆⠘⣄⠘⢆⠀⠀
⠀⠀⠰⠁⡰⠁⣤⡇⠌⠀⠀⠀⠀⠀⠀⠀⠀⠸⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠐⢢⢉⠆⣿⠈⡕⢒⠦⡤⣍⣉⣹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣀⠠⠄⠀⢻⠿⠋⣁⣴⣾⣿⣷⣦⣈⠙⠻⣟⠐⠠⠄⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⣉⣉⢤⠴⡒⢫⠉⣼⠱⡈⢆⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⡄⠀⠁⠀⠀⠀⠀⠸⡀⠀⠘⠀⢺⣇⠹⣧⡘⢆⠀
⠀⢠⠃⣼⠃⢠⡟⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⣼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠌⢢⠘⡌⡟⢠⡅⡌⠀⠀⠀⠘⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⠐⠒⠀⢹⣤⡈⠛⠿⣿⣿⣿⠿⠛⢉⣤⡎⠉⢐⠒⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠃⠀⠀⠀⢡⢈⠆⢹⢢⡑⠌⡐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢧⠀⠀⠀⠀⠀⠀⠀⢳⠀⠀⠇⠉⣿⡇⠸⢿⡛⢆
⢀⠃⣸⠃⢠⣾⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⡈⠤⡙⡰⡷⢰⣆⣀⡀⠀⡀⡅⠀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠃⠀⠀⢈⣿⣿⣷⡦⠌⠉⡁⢴⣾⣿⣿⠅⠀⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠁⠃⢸⢈⡀⢀⣀⣤⡆⢼⠢⠜⡐⡀⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⠀⠸⣿⡄⠙⣷⡈

-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>♡ gelli's site </title>
  <link rel="icon" type="image/png" href="https://gelli.moe/pink-sparkly-heart.gif" />
  <link href="https://fonts.cdnfonts.com/css/lovely-bubbles" rel="stylesheet">
</head>

  <style>
    :root {
      --pink-border: #ff8cc4;
      --pink-hi: #ff89c2;
      --pink-text: #FFABD9;
      --design-width: 860px;
      --card-side-padding: 20px;
    }
    html, body {
      margin: 0; padding: 0; box-sizing: border-box;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      font-family: 'Comic Sans MS', system-ui, sans-serif;
      background-image: url('https://gelli.moe/pink-white-paws.png');
      background-size: 700px 300px;
      background-repeat: repeat;
      min-height: 100vh; width: 100%;
      overflow-x: hidden;
    }
    
    /* FORCE a single scrollbar (body only) */
html, body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  padding-top:30px;
  padding-bottom:50px;
}

body::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;

filter: drop-shadow(0 0 2px rgba(255, 180, 215, 1.0));

  background: url("https://gelli.moe/white-pink-lace-with-bows.png") repeat-x;
  background-size: 70px 45px;

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

body::after{
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;

  filter: drop-shadow(0 0 2px rgba(255, 180, 215, 1.0));

  background: url("https://gelli.moe/white-pink-lace-with-bows.png") repeat-x;
  background-size: 70px 45px;

  pointer-events: none;
  z-index: 99999;
  transform: rotate(180deg);
}

@media (max-width:600px){

  body::before{
    height: 28px;
    background-size: 45px 28px;
  }

  body::after{
    height: 28px;
    background-size: 45px 28px;
  }

  body{
    padding-top: 20px;
  }

}

html::-webkit-scrollbar{
  width: 0px;
  height: 0px;
}

    *, *::before, *::after { box-sizing: inherit; }
    img { user-select: none; }
    .site-url,
    .nav-title,
    .offsite-title,
    .featured-simple-title,
    .update-tab,
    .player-header,
    .footer-credit {
      font-family: 'Lovely Bubbles', sans-serif;
    }

body::-webkit-scrollbar {
  width: 14px;
}

body::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #fdf7fb 50%,
    #f9eff5 100%
  );
  border-radius: 10px;
  border: 1px solid #ffcde5;
  box-shadow: inset 0 0 6px #ffcde5,
              inset 0 0 10px #fff;
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffe6f3 0%,
    #ffbfdc 50%,
    #ff99cc 100%
  );
  border-radius: 10px;
  border: 1.5px solid #ff89c2;
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.8),
              inset 0 2px 4px rgba(255, 136, 194, 0.3),
              0 0 4px #ffd9f7;
  transition: all 0.3s ease;
}

body::-webkit-scrollbar-thumb:hover {
 background: linear-gradient(
    180deg,
    #ffd6ec 0%,
    #ff99cc 70%,
    #ff7ab8 100%
  );
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.9),
              inset 0 2px 4px rgba(255, 120, 180, 0.4),
              0 0 6px #ffcce8;
}

body::-webkit-scrollbar-corner {
  background: #fff7fb;
  border-radius: 6px;
}


    /* Main lace*/
    .pinky {
      border-width: 7px;
      border-style: solid;
      border-image: url("https://gelli.moe/pink-lace-border.png") 6 fill round;
      padding: 2px;
      background: #fff5fb;
      border-radius: 14px;
      min-width: 590px;
      max-width: 860px;
      width: 100%;
      margin: 20px auto 0;
      position: relative;
      overflow: hidden;
    }
    
    /* Outer lace wrapper */
.lace-wrap{
  border: 10px solid transparent;
  border-image: url("https://gelli.moe/white-lace-border.png") 8 fill round;

  border-radius: 14px;
  padding: 4px;
  width: fit-content;
  margin: 0px auto 0;

  /* background behind lace */
  background-color: #ffffff;
  background-clip: padding-box;
  
  box-shadow: 0 0 8px rgba(255, 180, 215, 1.0);
}

.banner-container{
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
}

.header-banner{
  position: relative;
  width: 100%;
  min-height: 350px;
  border-radius: 14px;
  border: 1.5px solid var(--pink-border);
  background-image: url("https://gelli.moe/cute.png");
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
  overflow: hidden;
}

.header-banner::after{
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 250px;
  height: 100%;
  background-image: url("https://gelli.moe/cute.png");
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
  border-radius: 0 14px 14px 0;
  z-index: 7;
  pointer-events: none;
}

.banner-oc {
  position: absolute;
  right: -10px;
  bottom: -50px;
  width: 420px;
  height: auto;
  z-index: 8;
  pointer-events: none;
  filter:
    drop-shadow(2px 0 0 #ff86b4)
    drop-shadow(-2px 0 0 #ff86b4)
    drop-shadow(0 2px 0 #ff86b4)
    drop-shadow(0 -2px 0 #ff86b4)
    drop-shadow(2px 2px 0 #fff)
    drop-shadow(-2px -2px 0 #fff)
    drop-shadow(2px -2px 0 #fff)
    drop-shadow(-2px 2px 0 #fff);
}
}


    .header-logo {
      position: relative;
      top: -40px;
      left: 0;
      width: 300px;
      filter: drop-shadow(1px 1px 5px #ff69b4);
      z-index: 500;
    }

/* Badge box that holds logo + site name */
.header-badge{
  position: absolute;
  left: 12px;    /* move inside */
  bottom: 12px;  /* move inside */
  height: 180px;
  left: 12px;
  bottom: 12px;
  z-index: 20;

  background-size: 300px;
  background-color: #ffffffff;

border: 1.5px solid var(--pink-border);
border-radius: 14px;


  display: inline-flex;
  flex-direction: row;       /* SIDE BY SIDE */
  align-items: center;        /* EVEN LINE-UP */
  gap: 14px;                  /* EVEN SPACE */
}

/* Logo inside the badge */
.header-logo{
  position: relative;
  z-index: 500;
  top: -25px;
  left: 0px;
  width: 250px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0px 3px #ffa8cbff)
}

/* Site name inside the badge */
.site-url{
  position: static;
  margin: 0;

  font-family: 'Lovely Bubbles', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #ffb2d5;
  font-weight: bold;
  letter-spacing: 1.2px;

 text-shadow:
  2px 0 0 #fff,
  -2px 0 0 #fff,
  0 2px 0 #fff,
  0 -2px 0 #fff,
  2px 2px 0 #fff,
  -2px -2px 0 #fff,
  2px -2px 0 #fff,
  -2px 2px 0 #fff,

  4px 0 0 #ff86b4,
  -4px 0 0 #ff86b4,
  0 4px 0 #ff86b4,
  0 -4px 0 #ff86b4,
  4px 4px 0 #ff86b4,
  -4px -4px 0 #ff86b4,
  4px -4px 0 #ff86b4,
  -4px 4px 0 #ff86b4;

  white-space: nowrap;
  pointer-events: none;
}

/* Phone tweak */
@media (max-width: 600px){
  .header-badge{
    left: 10px;
    bottom: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    gap: 10px;
  }

  .header-logo{
    width: 200px;
  }

  .site-url{
    font-size: 24px;
  }
}

/* Site name inside the badge (no absolute positioning now) */
.site-url{
  position: static;
  font-family: 'Lovely Bubbles', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #ffb2d5;
  font-weight: bold;
  letter-spacing: 1.2px;

text-shadow:
  2px 0 0 #fff,
  -2px 0 0 #fff,
  0 2px 0 #fff,
  0 -2px 0 #fff,
  2px 2px 0 #fff,
  -2px -2px 0 #fff,
  2px -2px 0 #fff,
  -2px 2px 0 #fff,

  4px 0 0 #ff86b4,
  -4px 0 0 #ff86b4,
  0 4px 0 #ff86b4,
  0 -4px 0 #ff86b4,
  4px 4px 0 #ff86b4,
  -4px -4px 0 #ff86b4,
  4px -4px 0 #ff86b4,
  -4px 4px 0 #ff86b4;
  pointer-events: none;
}

/* Phone tweak so the badge stays nice */
@media (max-width: 600px){
  .header-badge{
    left: 10px;
    bottom: 10px;
    padding: 8px 10px 10px;
    border-radius: 12px;
  }

  .site-url{
    font-size: 25px;
  }

  .header-logo{
    width: 210px;
    max-width: 70vw;
  }
}

.site-url{
  position: static;
  margin-left: -10px;     /* similar to your old left:32 */
  font-size: 34px;
}

    .site-url {
      position: absolute;
      left: 25px;
      bottom: 18px;
      font-family: 'Lovely Bubbles';
      font-size: 34px;
      color: #ffb2d5;
      font-weight: bold;
      letter-spacing: 1.2px;
      text-shadow:
  2px 0 0 #fff,
  -2px 0 0 #fff,
  0 2px 0 #fff,
  0 -2px 0 #fff,
  2px 2px 0 #fff,
  -2px -2px 0 #fff,
  2px -2px 0 #fff,
  -2px 2px 0 #fff,

  4px 0 0 #ff86b4,
  -4px 0 0 #ff86b4,
  0 4px 0 #ff86b4,
  0 -4px 0 #ff86b4,
  4px 4px 0 #ff86b4,
  -4px -4px 0 #ff86b4,
  4px -4px 0 #ff86b4,
  -4px 4px 0 #ff86b4;
      z-index: 16; 
      pointer-events: none;
    }

   .rainbow-inner {
  background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%);
  background-size: cover;
  background-repeat: repeat-x;
  border-radius: 10px;
  padding: 7px 0px;
  width: 100%;
}

.rainbow-bordered {
  border: 1.5px solid var(--pink-border);
}

.scroll-spacing {
  margin: 10px 0;
}

.rainbow-inner {
  background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%);
  background-size: cover;
  background-repeat: repeat-x;
  border-radius: 10px;
  padding: 7px 0px;
  width: 100%;
}

.rainbow-bordered {
  border: 1.5px solid var(--pink-border);
}

.scroll-spacing {
  margin: 10px 0;
}

.rainbow-text {
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 #ff69b4,
               -1px -1px 0 #ff69b4,
               1px -1px 0 #ff69b4,
               -1px 1px 0 #ff69b4;
  filter: drop-shadow(0 0 2px rgba(255, 85, 167, 0.6));
  display: inline-block;
  padding: 0 10px;
  user-select: none;
}

.row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 6px;
}

.left-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  height: 25px;
  padding: 13px 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 100%;
  white-space: nowrap;
  animation: scroll-text 12s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes scroll-text {
  0%   { left: 100%; }
  100% { left: -60%; }
}

    .offsite-wrapper {
      background-image: radial-gradient(#ffd6e8 10%, transparent 25%),
      radial-gradient(#ffd6e8 10%, transparent 25%);
      background-color: #ffffff;
      background-position: 0 0, 50px 50px;
      background-size: 20px 20px;
      padding: 5px;
      border-radius: 12px;
      border: 1.5px solid var(--pink-border);
      width: 180px;
      min-width: 159px;
      height: 629px;
      overflow-y: auto;
    }
    .offsite-box {
      padding: 8px;
    }
    .nav-title {
      font-size: 20px;
      font-family: 'Lovely Bubbles';
      color: var(--pink-text);
      margin-bottom: 9px;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff,
                   -1px -1px 0 #fff,
                   1px -1px 0 #fff,
                   -1px 1px 0 #fff;
      filter: drop-shadow(0 0 2px rgba(255, 85, 167, 0.6));
    }
    .nav-links {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 19px;
    }
    .nav-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%);
      background-size: cover;
      border-radius: 7px;
      padding: 8px 18px;
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      font-size: 17px;
      border: 1px solid #ffafd4;
      box-shadow: 0 2px 4px rgba(255,170,212,.28);
      -webkit-text-stroke: 0.2px #ff47a3;
      text-shadow: 1px 1px 0 #ff69b4,
                   -1px -1px 0 #ff69b4,
                   1px -1px 0 #ff69b4,
                   -1px 1px 0 #ff69b4,
                   0 0 5px #ff007b99;
    }
    .nav-icon {
      height: 16px;
      width: 16px;
      flex-shrink: 0;
    }
    .offsite-title {
      font-size: 22px;
      font-family: 'Lovely Bubbles';
      color: var(--pink-text);
      margin-bottom: 8px;
      font-weight: bold;
      text-shadow: 1px 1px 0 #fff,
                   -1px -1px 0 #fff,
                   1px -1px 0 #fff,
                   -1px 1px 0 #fff;
      filter: drop-shadow(0 0 2px rgba(255, 85, 167, 0.6));
      padding-left: 8px;
    }
    .offsite-links {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .offsite-btn {
      background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%);
      background-size: cover;
      border-radius: 7px;
      padding: 9px 12px;
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 9px;
      border: 1px solid #ffafd4;
      box-shadow: 0 2px 4px rgba(255,170,212,.36);
      -webkit-text-stroke: 0.2px #ff47a3;
     text-shadow: 1px 1px 0 #ff69b4,
                   -1px -1px 0 #ff69b4,
                   1px -1px 0 #ff69b4,
                   -1px 1px 0 #ff69b4,
                   0 0 5px #ff007b99;
    }

    .nav-btn,
    .offsite-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .nav-btn:hover,
    .offsite-btn:hover {
    transform: scale(1.08); /* zoom in */
    box-shadow: 0 0px 5px rgba(255, 137, 194, 0.5); /* soft pink glow */
    }

    .site-box {
  width: 180px;
  height: 251px;

   background: repeating-linear-gradient(
    45deg,
    #ffc5ddff 0px,
    #ffc5ddff 12px,
    #ffffff 12px,
    #ffffff 24px
  );

  border: 1.5px solid var(--pink-hi);
  border-radius: 10px;
  padding: 10px;

  max-height: 50vh;
  margin-left: -40px;
  margin-top: 5px;
  position: relative;
}

/* ONE inner scrollable box */
.site-box-inner{
  height: 100%;
  background: rgba(255,255,255,0.82);
  border: 1.5px solid var(--pink-hi);
  border-radius: 10px;
  padding: 8px;

  overflow-y: auto;   /* ← SCROLLBAR HERE */
}

/* title */
.site-box-inner .site-title{
  text-align: center;
  font-family: 'Lovely Bubbles';
  font-size: 25px;
  color: #ffdaecff;
  -webkit-text-stroke: 1.2px #FF85C0;
  text-shadow: 0 0 2px var(--pink-hi);
  margin: 2px 0 15px;
}

/* button styling */
.site-box-inner img{
  display: block;
  margin: 12px auto;
  max-width: 90%;
  height: auto;
  filter: drop-shadow(0 0 2px var(--pink-hi));
}

/* code styling */
.site-box-inner code{
  display: block;
  background: #ffffff;
  border: 1.5px solid var(--pink-hi);
  border-radius: 8px;
  padding: 6px;

  font-size: 9px;   /* bigger than before */
  color: #ff9aca;
  text-align: center;
  line-height: 1.25;

  word-break: break-word;
  margin-top: 8px;
}

/* LINK MY SITE scrollbar — same as body */
.site-box-inner::-webkit-scrollbar {
  width: 12px;
}

.site-box-inner::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #fdf7fb 50%,
    #f9eff5 100%
  );
  border-radius: 10px;
  border: 1px solid #ffcde5;
  box-shadow: inset 0 0 6px #ffcde5,
              inset 0 0 10px #fff;
}

.site-box-inner::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffe6f3 0%,
    #ffbfdc 50%,
    #ff99cc 100%
  );
  border-radius: 10px;
  border: 1px solid #ff89c2;
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.8),
              inset 0 2px 4px rgba(255, 136, 194, 0.3),
              0 0 4px #ffd9f7;
  transition: all 0.3s ease;
}

.site-box-inner::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ffd6ec 0%,
    #ff99cc 70%,
    #ff7ab8 100%
  );
  box-shadow: inset 0 -2px 4px rgba(255, 255, 255, 0.9),
              inset 0 2px 4px rgba(255, 120, 180, 0.4),
              0 0 6px #ffcce8;
}

.site-box-inner::-webkit-scrollbar-corner {
  background: #fff7fb;
  border-radius: 6px;
}

    /* Profile / scrolling images */
    .middle {
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1;
      min-width: 420px;
    }
    .profile-scroll-box {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid var(--pink-border);
  max-height: 220px;

  overflow-y: auto;   /* vertical scroll */

  padding: 16px 25px;

  display: flex;
  flex-direction: column;   /* stack sections */
  gap: 15px;
}

/* PROFILE BOX scrollbar */
.profile-scroll-box::-webkit-scrollbar {
  width: 12px;
}

.profile-scroll-box::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #fdf7fb 50%,
    #f9eff5 100%
  );
  border-radius: 10px;
  border: 1px solid #ffcde5;
  box-shadow: inset 0 0 6px #ffcde5,
              inset 0 0 10px #fff;
}

.profile-scroll-box::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffe6f3 0%,
    #ffbfdc 50%,
    #ff99cc 100%
  );
  border-radius: 10px;
  border: 1px solid #ff89c2;
  box-shadow: inset 0 -2px 4px rgba(255,255,255,0.8),
              inset 0 2px 4px rgba(255,136,194,0.3),
              0 0 4px #ffd9f7;
}

.profile-scroll-box::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ffd6ec 0%,
    #ff99cc 70%,
    #ff7ab8 100%
  );
}

.profile-scroll-box::-webkit-scrollbar-corner {
  background: #fff7fb;
}

    .profile-flex-row {
      display: flex;
      align-items: center;
      gap: 22px;
      width: 100%;
    }
    .profile-desc {
      font-size: 15px;
      color: var(--pink-text);
      line-height: 1.6;
      font-weight: bold;
      text-align: left;
    }
    .scroll-imgs {
      margin: 8px 0 0;
      width: 461px;
      height: 55px;
      overflow: hidden;
      position: relative;
      border-radius: 10px;
      display: flex;
      align-items: center;
    }
    .scroll-track {
      display: flex;
      gap: 12px;
      align-items: center;
      position: absolute;
      left: 100%;
      animation: scroll-stamps 20s linear infinite;
    }
    .scroll-track img {
      height: 40px;
      width: auto;
      pointer-events: none;
      display: block;
      filter: drop-shadow(0 0 3px rgba(255, 85, 167, 1));
    }
    @keyframes scroll-stamps {
      0% { left: 100%; }
      100% { left: -200%; }
    }

    .updates-flex{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

    /* Featured image & poll */
.featured-simple-box {
  margin: 10px 0 0;
  width: 300px;
  height: 330px;

  background:
    linear-gradient(rgba(255, 255, 255, .2)),
    url("https://gelli.moe/f6d1454d.gif");
  background-repeat: repeat;
  background-size: 200px 200px;

  padding: 10px 0;
  border: 1.5px solid var(--pink-border);
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.featured-simple-title {
  margin: 0 0 15px;
  text-align: center;
  letter-spacing: .3px;

  font-family: 'Lovely Bubbles';
  font-size: 1.7rem;
  font-weight: bold;
  color: #fff;

  -webkit-text-stroke: 1.2px #ff89c2;
  text-shadow:
    0 2px 5px #fff,
    0 1px 5px #fff,
    0 1px 2px #ffd8ef;
}

.featured-simple-img {
  display: block;
  width: 210px;
  background: #fff;

  border: 1px solid #ff89c2;
  border-radius: 6px;
  box-shadow: 0 0px 7px #ff95c8ff;

  cursor: pointer;
  transition: transform .33s cubic-bezier(.42, 1.27, .43, .99);
}

.featured-simple-img:hover {
  transform: scale(1.20) rotate(-.8deg);
  box-shadow: 0 6px 20px #ffc1e6c9;
  z-index: 1;
}

/* Wraps image + note */
.hover-wrap {
  position: relative;
  display: inline-block;
}

/* Hidden note */
.hover-note {
  position: absolute;
  top: 115%; /* under image */
  left: 50%;
  transform: translateX(-50%) scale(0.8);

  background: #ffffff;
  color: #ff69b4;
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 15px;

  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #ff69b4;

  white-space: nowrap;

  opacity: 0;
  pointer-events: none;

  transition: all 0.25s ease;

  box-shadow: 0 0 5px #ffcce5;
  z-index: 50;
}

/* SHOW when IMAGE is hovered */
.featured-simple-img:hover + .hover-note {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}


.update-lace::-webkit-scrollbar {
  width: 12px;
}

.update-lace::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #fff6fa, #ffeaf5);
  border-radius: 10px;
  border: 1px solid #ffb6d9;
  box-shadow: inset 0 0 5px rgba(255, 170, 200, 0.6),
              inset 0 0 10px rgba(255, 255, 255, 0.8);
}

.update-lace::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffe6f3 0%,
    #ffbfdc 50%,
    #ff99cc 100%
  );
  border-radius: 10px;
  border: 1px solid #ff89c2;
  box-shadow: inset 0 -2px 4px rgba(255,255,255,0.8),
              inset 0 2px 4px rgba(255,136,194,0.3),
              0 0 4px #ffd9f7;
}

.update-lace::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ffd6ec 0%,
    #ff99cc 70%,
    #ff7ab8 100%
  );
}

.update-lace::-webkit-scrollbar-corner {
  background: #fff0f8;
  border-radius: 6px;
}


.update-box {
  width: 230px;
  height: 251px;
  border: 1.5px solid var(--pink-border);
  border-radius: 10px;
  padding: 14px;
  background: url('https://gelli.moe/tumblr_lmr1nnybfP1qcfn0j.png') repeat;
  font-family: 'Comic Sans MS', sans-serif;
  color: #5a4963;
  position: relative;
  margin-top: 5px;
}

.update-tab {
  font-family: 'Lovely Bubbles';
  font-size: 17px;
  color: #ffffffff;
  background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%);
  border: 1px solid #ff9fc9;
-webkit-text-stroke: 1px #ff69b4;
  margin-bottom: 10px;
  border-radius: 12px;
  padding: 8px 0;
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 10px;
   text-shadow: 1px 1px 0 #ff69b4,
                   -1px -1px 0 #ff69b4,
                   1px -1px 0 #ff69b4,
                   -1px 1px 0 #ff69b4;
  filter: drop-shadow(0 0 2px #ffafd7ff);
}


.update-lace {
  border: 6px solid transparent;
  border-image: url('https://gelli.moe/purple-lace-border.png') 6 fill round;
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.7);
  max-height: 130px;
  filter: drop-shadow(0 0 2px rgba(222, 130, 255, 0.2));
  overflow-y: auto;
}

.update-lace ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.update-lace li {
  margin-bottom: 5px;
  font-size: 14px;
}

.update-lace a {
  color: #ff64b2ff;
  font-weight: bold;
  text-decoration: none;
}

.update-lace a:hover {
  color: #ff2aadff;
  text-decoration: underline;
}

.update-date {
  font-weight: bold;
  color: #ff89c2;
}

.side-by-side-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

    .poll-box {
      background: #fff;
      background-size: cover;
      border: 1.5px solid var(--pink-border);
      padding: 13px;
      width: 210px;
      height: 330px;
      color: #ff33bb;
      font-size: 14px;
      border-radius: 10px;
      text-shadow: none;
      margin: 10px 0 0 5px;
    }
    .poll-box label {
      margin-left: 5px;
      color: #ff33bb;
      text-shadow: none;
    }

/* Pollcode Vote / View buttons (smaller + Comic Sans + pink text) */
.poll-form input[type="submit"]{
  appearance: none;
  -webkit-appearance: none;

  font-family: "Comic Sans MS", system-ui, sans-serif;
  font-size: 12px;
  font-weight: bold;

  padding: 4px 10px;
  border-radius: 9px;

  background: linear-gradient(#fff6fb, #ffd2e8);
  border: 1.5px solid #ff89c2;

  color: #ff33bb;
  text-shadow: 0 0 3px #fff;

  cursor: pointer;

  box-shadow: 0 0px 3px rgba(255, 137, 194, 0.35),
}

.poll-form input[type="submit"]:hover{
  background: linear-gradient(#fff0f9, #ffbfe0);
  color: #ff33bb;
  transform: scale(1.05);
}

.poll-form input[type="submit"]:active{
  transform: scale(0.98);
}

/* Lace top + bottom for the favorite dessert poll box */
.poll-box{
  position: relative;
  overflow: hidden; /* keeps lace inside rounded corners */
}

/* top lace */
.poll-box::before{
  content: "";
  position: absolute;
  top: -1px; /* move up */
  left: 0;

  width: 100%;
  height: 40px; /* smaller lace */

  background: url("https://gelli.moe/tumblr_lsznm2ipT11ql1l0v540.gif") repeat-x;
  background-size: 70px 40px; /* smaller pattern */

  pointer-events: none;
  opacity: 0.95;
}

/* bottom lace */
.poll-box::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: url("https://gelli.moe/tumblr_lsznm2ipT11ql1l0v540.gif") repeat-x;
  background-size: 70px 40px;
  pointer-events: none;
  opacity: 0.95;
}
/* give the content room so lace doesn't cover it */
.poll-box > *{
  position: relative;
  z-index: 1;
}

.poll-box{
  padding-top: 42px;   /* space under top lace */
  padding-bottom: 42px;/* space above bottom lace */
}

#statuscafe{
  position: relative;
  width: 240px;
  height: 250px;
  background: #ffffff;
  border: 1.5px solid var(--pink-border);
  border-radius: 10px;

  padding: 50px 8px 46px;
  margin: 0 auto;
  font-family: 'Comic Sans MS', sans-serif;
  color: #ff89c2;
  text-align: center;
  overflow: hidden;
}

#statuscafe::before,
#statuscafe::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 60px;
  pointer-events: none;
}

/* top lace */
#statuscafe::before{
  top: 0;
  background: url('https://gelli.moe/pink-white-ploka-dot-lace.gif') repeat-x top left;
  background-size: 70px 45px;
}

/* bottom lace */
#statuscafe::after{
  bottom: -20px;
  background: url('https://gelli.moe/pink-white-ploka-dot-lace-2.gif') repeat-x top left;
  background-size: 70px 45px;
}

#statuscafe-username,
#statuscafe-content{
  position: relative;
  z-index: 1;
  margin-top: 60px;
}

#statuscafe-username a {
  color: #ff4fa3;
  text-decoration: none;
  padding: 0px 0px;
  border-radius: 6px;
  font-weight: bold;
}

#statuscafe-username a:hover {
  color: #ff0090ff;
  text-decoration: underline;
  background-color: transparent;
}

    /* Gallery */
    .right-rail {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gallery-box {
      background: #fff9fc;
      border-radius: 10px;
      border: 1.5px solid var(--pink-border);
      width: 173px;
      height: 400px;
      display: flex;
      flex-direction: column;
    }
    .gallery-img {
      width: 100%;
      height: 25%;
      object-fit: cover;
      display: block;
      background: #fff;
    }
    .gallery-img:first-child {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .gallery-img:last-child {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    /* Calendar */
    .calendar-container {
      background: #fff;
      border: 1.5px solid var(--pink-border);
      border-radius: 10px;
      padding: 7px;
      width: 173px;
      height: 251px;
      font-family: 'Comic Sans MS', sans-serif;
    }
    .calendar-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #ff66aa;
      background: linear-gradient(to bottom,#fff,#ffe9f2);
      padding: 6px;
      border: 1.5px solid var(--pink-border);
      border-radius: 5px;
      margin-bottom: 10px;
    }
    .calendar-container table {
      border-collapse: collapse;
      width: 100%;
      table-layout: fixed;
    }
    .calendar-container th,
    .calendar-container td {
      border: 1.5px solid #ff8cc4;
      text-align: center;
      padding: 2px;
      font-size: 11px;
      color: #ff69b4;
      background: linear-gradient(to bottom, #ffffff, #fff0fa);
      width: 14.28%;
    }
    .calendar-container th {
      font-weight: bold;
      background: linear-gradient(to bottom, #fff6fb, #ffe4f2);
    }
    td:hover {
      background: #ffc7e4ff;
      cursor: pointer;
    }
    .calendar-container td.today {
  font-weight: bold;
  color: #ffffffff !important;
  background: linear-gradient(to bottom, #ffd6e8, #ff95caff) !important;
  box-shadow: 0 0 0 1.5px #ff3fb2ff inset;
}

    /* Clock text glow */
.clock-container{
  text-shadow:
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 10px #fff;
}
    

.calendar-container{overflow:visible;padding-bottom:6px;}
#calendar-table{table-layout:fixed;width:100%;border-collapse:collapse;}
#calendar-table th,
#calendar-table td{padding:2px;line-height:1;height:20px;}

    /* image fader card */
.fader-outer {
  width: 170px;
  height: 226px;
  padding: 10px;
  border: 1.5px solid var(--pink-border);
  border-radius: 10px;
 background-image: radial-gradient(#ffffff 25%, transparent 25%),
      radial-gradient(#ffffff 25%, transparent 25%);
  background-color: #f8e0ff;
  background-position: 0 0, 50px 50px;
  background-size: 20px 20px;
}

.image-fader {
  position: relative;
  width: 100%;
  height: 101%;
  border: 1.5px solid var(--pink-border);
  border-radius: 10px;
  overflow: hidden;
  background-image: url("https://gelli.moe/bgheartsribbonspink.gif");
background-repeat: repeat;
background-size: 60px 40px; /* adjust to zoom in/out */
background-position: top left;

}

.image-fader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeinout 15s infinite;
}

.image-fader img:nth-child(1) { animation-delay: 0s; }
.image-fader img:nth-child(2) { animation-delay: 3s; }
.image-fader img:nth-child(3) { animation-delay: 6s; }
.image-fader img:nth-child(4) { animation-delay: 9s; }
.image-fader img:nth-child(5) { animation-delay: 12s; }

.image-fader img:nth-child(1) {
  transform: translateY(-25px) scale(1.1);
}

.image-fader img:nth-child(2) {
  object-fit: contain;
  transform: scale(0.95) translateY(5px);
}

.image-fader img:nth-child(3) {
  object-fit: contain;
  transform: scale(1.1) translateY(5px);
}

.image-fader img:nth-child(4) {
  transform: translateY(0px) scale(1.2);
}

.image-fader img{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  background: #transparent;
}
@keyframes fadeinout {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}


    /* Bottom blinkies */
    .scroll-imgs2 {
      width: 841px;
      height: 45px;
      overflow: hidden;
      position: relative;
      border-radius: 10px;
      display: flex;
      align-items: center;
      background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%);
      background-size: cover;
      border: 1.5px solid var(--pink-hi);
      margin: 10px auto 0;
    }
    .scroll-track2 {
      display: flex;
      gap: 0;
      align-items: center;
      position: absolute;
      left: 100%;
      animation: scroll-blinkies 20s linear infinite;
    }
    .scroll-track2 img {
      height: 25px;
      width: auto;
      pointer-events: none;
      display: block;
      filter: drop-shadow(0 0 3px rgba(255, 85, 167, 1));
    }
    @keyframes scroll-blinkies {
      0% { left: 100%; }
      100% { left: -220%; }
    }

    .footer-credit {
      text-align: center;
      font-size: 20px;
      color: var(--pink-text);
      font-family: 'Lovely Bubbles','Comic Sans MS';
      opacity: .95;
      margin: 14px 0 6px;
      letter-spacing: .7px;
      text-shadow: 0 0 1px #fff,
                   0 1px 0 #fff,
                   0 -1px 0 #fff,
                   1px 0 0 #fff,
                   -1px 0 0 #fff,
                   0 0 4px var(--pink-text);
      width: 100%;
    }

    .footer-credit {
  font-family: 'Lovely Bubbles';
  font-size: 17px;
  letter-spacing: .7px;
  color: var(--pink-text);
  text-shadow: none;
  opacity: .95;

  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #ff89c2;
  border-radius: 10px;
  background: #ffffff;
}

.footer-credit-wrap {
  display: flex;
  justify-content: center;
  margin: 0px 0 0px;
  width: 100%;
}

.frame{
  position: relative;
  width: min(860px, calc(100% - 40px));
  margin: 20px auto 0;
}

.pinky{ margin: 0; }

.draggable-player{
  position: absolute;
      top: 100px;
      left: -250px;
      width: 260px;
      background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%);
      background-size: 320px 200px;
      border: 2px solid #ff89c2;
      border-radius: 18px;
      box-shadow: 0 0 10px 0 #ffe3f8;
      font-family: 'Comic Sans MS';
      z-index: 9999;
      user-select: none;
      transform: scale(0.8);
      transform-origin: top left;
}

    .player-header {
      background: #fff2fcff;
      padding: 8px;
      border-radius: 16px 16px 0 0;
      cursor: move;
      font-weight: bold;
      text-align: center;
      font-size: 1.1em;
      color: var(--pink-hi);
      letter-spacing: 1px;
      font-family: 'Lovely Bubbles';
      text-shadow: 0 0 2px #fff,
                   0 0 2px #fff,
                   1px 2px 6px #ffe6f9;
      border-bottom: 2px solid var(--pink-hi);
    }
    .song-title {
      text-align: center;
      padding: 12px 8px 2px 8px;
      font-size: 1.1em;
      color: #fff;
      min-height: 26px;
      text-shadow: 1px 1px 0 #ff69b4,
                   -1px -1px 0 #ff69b4,
                   1px -1px 0 #ff69b4,
                   -1px 1px 0 #ff69b4;
      filter: drop-shadow(0 0 2px rgba(255, 133, 192, 0.85));
    }
    .progress-bar-area {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px 8px 12px;
      font-size: .88em;
      color: var(--pink-hi);
      gap: 6px;
    }
    .progress-bar-area span {
      color: #fff;
      text-shadow: 1px 1px 0 #ff69b4,
                   -1px -1px 0 #ff69b4,
                   1px -1px 0 #ff69b4,
                   -1px 1px 0 #ff69b4;
      filter: drop-shadow(0 0 2px rgba(255, 85, 167, 0.85));
    }
    .progress-bar {
      flex: 1;
      appearance: none;
      height: 6px;
      background: #fff;
      border-radius: 8px;
      outline: none;
      margin: 0 8px;
    }
    .progress-bar::-webkit-slider-thumb {
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--pink-hi);
      border: 2px solid #fff;
      cursor: pointer;
      box-shadow: 0 0 4px #ff81c0ff ;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0 12px 0;
      gap: 15px;
    }
    .controls button {
      background: #fff;
      border: 1.5px solid var(--pink-hi);
      border-radius: 8px;
      font-size: 1.2em;
      color: var(--pink-hi);
      padding: 4px 11px;
      cursor: pointer;
      font-family: 'Comic Sans MS';
    }

.corner-sticker{
  filter: drop-shadow(1px 1px 3px #ff5badff);
  position: fixed !important;
  right: -15 !important;
  bottom: -10px !important;
  top: auto !important;
  left: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  width: 400px !important;
  height: auto !important;

  transform: none !important;   /* VERY IMPORTANT */
  z-index: 2147483647 !important;

  pointer-events: none !important;
  user-select: none !important;
  display: block !important;
}

.theme-corner{
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 2147483646;
}

.theme-toggle-btn{
  background: linear-gradient(to bottom, #fff6fb, #ffd6ea);
  border: 1.5px solid #ff8cc4;
  border-radius: 12px;
  color: #ff69b4;
  font-family: 'Lovely Bubbles', sans-serif;
  font-size: 20px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255, 180, 215, 0.7);
}

.theme-panel{
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 125px;
  padding: 8px;
  border: 1.5px solid #ff8cc4;
  border-radius: 14px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 0 8px rgba(255, 180, 215, 0.7);
  display: none;
}

.theme-panel.show{
  display: block;
}

.theme-mode-btn{
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1.5px solid #ff8cc4;
  border-radius: 10px;
  background: linear-gradient(to bottom, #fff6fb, #ffd6ea);
  color: #ff69b4;
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(255, 180, 215, 0.45);
}

.theme-mode-btn:last-child{
  margin-bottom: 0;
}

.theme-toggle-btn:hover,
.theme-mode-btn:hover{
  transform: scale(1.03);
}

@media (max-width:600px){
  .theme-corner{
    left: 6px;
    bottom: 6px;
  }

  .theme-toggle-btn{
    font-size: 16px;
    padding: 6px 10px;
  }

  .theme-panel{
    width: 105px;
    padding: 6px;
    bottom: calc(100% + 6px);
  }

  .theme-mode-btn{
    font-size: 12px;
    padding: 6px 8px;
  }

  .theme-corner{
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 2147483646;
}


.theme-panel{
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
}
@media (max-width: 600px){
  .theme-corner{
    left: 6px;
    bottom: 6px;
  }

}
@media (max-width: 600px){
  .corner-sticker{
    width: 200px !important;
  }
}
    
    /* --- SCALE THE ENTIRE CARD ON SMALL SCREENS --- */
:root {
  --design-width: 860px; 
  --card-side-padding: 20px; 
}

/* ===== Base layout ===== */
.frame{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.scaler{
  width: var(--design-width);
  margin: 0 auto;
  transform-origin: top center;
}

@media (max-width:600px){

  body{
    padding-bottom:0 !important;
  }

  .frame{
    height:auto;
    min-height:0;
  }

  .scaler{
    transform: scale(0.4);
    transform-origin: top center;
  }

}

/* Show music player on desktop/tablet */
@media (min-width: 601px){
  .draggable-player{
    position: fixed;
    top: 100px;
    left: 12px;
    transform: scale(0.8);
    transform-origin: top left;
    z-index: 10000;
  }
}

/* ===== Phones only ===== */
@media (max-width: 600px){
  /* shrink whole site */
  .scaler{
    transform: scale(0.4);
    transform-origin: top center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

 @media (max-width: 600px){
  .draggable-player{
    position: fixed;
    top: 100px;
    left: 12px;
    transform: scale(0.55);
    transform-origin: top left;
    max-width: calc(100vw - 24px);
    z-index: 10000;
  }
}


  /* bottom blinkies fit width */
  .scroll-imgs2{ width: 100%; }

  /* prevent extra horizontal scroll */
  html, body{
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    height: 100%;
  }
}

/* ===== Mid-size (optional tablets/laptops) ===== */
@media (max-width: 1200px) and (min-width: 901px){
  :root{ --scale: calc((100vw - var(--card-side-padding)*2) / var(--design-width)); }
  .scaler{
    margin: 0 auto;
    transform: scale(min(1, var(--scale)));
    transform-origin: top center;
  }
}

@media (max-width: 600px){
  .scaler{
    overflow: visible;
  }
}
@media (max-width: 600px){
  .pinky{ margin-top: 0 !important; }
  .row{ margin-bottom: 0 !important; }
  .bottom-wrapper{
    transform: translateX(20px) !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }
}

.fader-outer{
    position: relative;
    top: 6px;
  }

  .calendar-container{
    position: relative;
    top: -6px;
  }
}

@media (max-width: 600px){
  .fader-outer{
    margin-top: 10px !important;
    height: 240px !important;
  }
}

@media (max-width:600px){
  .site-box{margin-top:5px!important;}
}
@media (max-width:600px){
  #statuscafe{margin-top:3px!important;}
}
@media (max-width:600px){
  .update-box{margin-top:5px!important;}
 
}

  @media (max-width:600px){
  body{
    overflow:hidden;
  }
  }
  
/* force normal images in light mode */
body:not(.dark-mode) .scroll-track img,
body:not(.dark-mode) .scroll-track2 img,
body:not(.dark-mode) .image-fader img {
  filter: none !important;
}

/* put the pink glow back in light mode */
body:not(.dark-mode) .scroll-track img,
body:not(.dark-mode) .scroll-track2 img {
  filter: drop-shadow(0 0 3px rgba(255, 85, 167, 1)) !important;
}

body:not(.dark-mode) .image-fader img {
  filter: drop-shadow(0 0 2px #ff9bc3ff) !important;
}

/* =========================
   DARK MODE OVERRIDES
========================= */

body.dark-mode{
  background-image: url('https://gelli.moe/black-gray-paws.png');
}

/* top + bottom lace */
body.dark-mode::before{
  background: url("https://gelli.moe/360.gif") repeat-x;
  background-size: 200px 45px;
}

body.dark-mode::after{
  background: url("https://gelli.moe/360.gif") repeat-x;
  background-size: 200px 45px;
}

@media (max-width:600px){
  body.dark-mode::before{
    height: 28px;
    background-size: 70px 35px;
  }

  body.dark-mode::after{
    height: 28px;
    background-size: 70px 35px;
  }
}

body.dark-mode::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    #4a0025 0%,
    #7a003d 50%,
    #b3005c 100%
  );
  border-radius: 10px;
  border: 1px solid #ff4fa3;
  box-shadow: inset 0 0 6px #5c002e,
              inset 0 0 10px #ff86b4;
}

body.dark-mode::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffd1e8 0%,
    #ff86b4 45%,
    #ff2f92 100%
  );
  border-radius: 10px;
  border: 1.5px solid #c8006a;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ffe9f4 0%,
    #ffc7e3 35%,
    #ff8fc2 100%
  );
}

body.dark-mode::-webkit-scrollbar-corner {
  background: #5a002d;
}

/* main wrappers */
body.dark-mode .pinky{
  border: 7px solid transparent;
  border-image: url("https://gelli.moe/hot-pink-lace-border.png") 6 round;
  padding: 5px;
  background: #fff;
  background-clip: padding-box;
  border-radius: 0;
}

body.dark-mode .lace-wrap{
  border: 10px solid transparent;
  border-image: url("https://gelli.moe/white-gray-lace-border.png") 8 fill round;
  border-radius: 19px;
  padding: 3px;
  background-color: #fff;
  background-clip: padding-box;
  box-shadow: none;
}

/* header */
body.dark-mode .header-banner{
  border: 1.5px solid #000;
  background-image: url("https://gelli.moe/cute-2.gif");
}

body.dark-mode .header-banner::after{
  background-image: url("https://gelli.moe/cute-2.gif");
}

body.dark-mode .banner-oc{
  filter:
    drop-shadow(2px 0 0 #ff48a3)
    drop-shadow(-2px 0 0 #ff48a3)
    drop-shadow(0 2px 0 #ff48a3)
    drop-shadow(0 -2px 0 #ff48a3)
    drop-shadow(2px 2px 0 #fff)
    drop-shadow(-2px -2px 0 #fff)
    drop-shadow(2px -2px 0 #fff)
    drop-shadow(-2px 2px 0 #fff);
}

body.dark-mode .header-logo{
  filter: drop-shadow(0 0 3px #000);
}

body.dark-mode .header-badge{
  background-color: #fff;
  border: 1.5px solid #000;
}

body.dark-mode .site-url{
  color: #000;
  text-shadow:
    2px 0 0 #fff,
    -2px 0 0 #fff,
    0 2px 0 #fff,
    0 -2px 0 #fff,
    2px 2px 0 #fff,
    -2px -2px 0 #fff,
    2px -2px 0 #fff,
    -2px 2px 0 #fff,

    4px 0 0 #ff48a3,
    -4px 0 0 #ff48a3,
    0 4px 0 #ff48a3,
    0 -4px 0 #ff48a3,
    4px 4px 0 #ff48a3,
    -4px -4px 0 #ff48a3,
    4px -4px 0 #ff48a3,
    -4px 4px 0 #ff48a3;
}

/* marquee */
body.dark-mode .rainbow-inner{
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
}

body.dark-mode .rainbow-bordered{
  border: 1.5px solid #000;
}

/* sidebar */
body.dark-mode .offsite-wrapper{
  background-image:
    radial-gradient(#9b9b9b 10%, transparent 25%),
    radial-gradient(#9b9b9b 10%, transparent 25%);
  background-color: #fff;
  border: 1.5px solid #000;
}

body.dark-mode .nav-title,
body.dark-mode .offsite-title{
  color: #000;
  filter: drop-shadow(0 0 2px #000);
}

body.dark-mode .nav-btn,
body.dark-mode .offsite-btn{
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
  border: 1px solid #000;
  box-shadow: 0 2px 4px #000;
}

body.dark-mode .nav-btn:hover,
body.dark-mode .offsite-btn:hover{
  box-shadow: 0 0 5px #000;
}

/* link my site */
body.dark-mode .site-box{
  background: repeating-linear-gradient(
    45deg,
    #000 0px,
    #000 12px,
    #ffffff 12px,
    #ffffff 24px
  );
  border: 1.5px solid #000;
}

body.dark-mode .site-box-inner{
  background: #fff;
  border: 1.5px solid #000;
}

body.dark-mode .site-box-inner .site-title{
  color: #ffafd9;
  -webkit-text-stroke: 1.3px #ff339d;
  text-shadow: 0 0 2px #ff339d;
}

body.dark-mode .site-box-inner img{
  filter: drop-shadow(0 0 2px #000);
}

body.dark-mode .site-box-inner code{
  background: #252525;
  border: 1.5px solid #000;
  color: #fff;
}

body.dark-mode .site-box-inner::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    #0f0f0f 0%,
    #1a1a1a 50%,
    #262626 100%
  );
  border: 1px solid #323232;
  box-shadow: inset 0 0 6px #000,
              inset 0 0 10px #000;
}

body.dark-mode .site-box-inner::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #cfcfcf 50%,
    #8f8f8f 100%
  );
  border: 1.5px solid #000;
}

body.dark-mode .site-box-inner::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #d9d9d9 70%,
    #a6a6a6 100%
  );
}

body.dark-mode .site-box-inner::-webkit-scrollbar-corner {
  background: #111;
}

/* profile box */
body.dark-mode .profile-scroll-box{
  background: #fff;
  border: 1.5px solid #000;
}

body.dark-mode .profile-desc{
  color: #000;
}

body.dark-mode .profile-scroll-box::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    #0f0f0f 0%,
    #1a1a1a 50%,
    #262626 100%
  );
  border: 1px solid #323232;
  box-shadow: inset 0 0 6px #000,
              inset 0 0 10px #000;
}

body.dark-mode .profile-scroll-box::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #cfcfcf 50%,
    #8f8f8f 100%
  );
  border: 1.5px solid #000;
}

body.dark-mode .profile-scroll-box::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #d9d9d9 70%,
    #a6a6a6 100%
  );
}

body.dark-mode .profile-scroll-box::-webkit-scrollbar-corner {
  background: #111;
}

/* stamps + blinkies */
body.dark-mode .scroll-track img,
body.dark-mode .scroll-track2 img{
  filter: grayscale(100%) sepia(50%) hue-rotate(293deg) saturate(500%) brightness(100%) contrast(110%) drop-shadow(0 0 3px rgba(255, 85, 167, 1));
}

body.dark-mode .scroll-imgs2{
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
  border: 1.5px solid #000;
}

/* featured */
body.dark-mode .featured-simple-box{
  background: url("https://gelli.moe/12.gif");
  background-repeat: repeat;
  background-size: 200px 200px;
  border: 1.5px solid #000;
}

body.dark-mode .featured-simple-title{
  -webkit-text-stroke: 1.2px #000;
  text-shadow:
    0 2px 5px #fff,
    0 1px 5px #fff,
    0 1px 2px #ff47a6;
}

body.dark-mode .featured-simple-img{
  border: 1px solid #000;
  box-shadow: 0 0 7px #000;
  filter: grayscale(100%) sepia(50%) hue-rotate(280deg) saturate(300%) brightness(100%) contrast(110%);
}

body.dark-mode .profile-flex-row img:first-child {
  filter: grayscale(100%) sepia(50%) hue-rotate(293deg) saturate(500%) brightness(100%) contrast(100%);
}

body.dark-mode .profile-flex-row img:last-child {
  filter: drop-shadow(0 0 3px #ffaed6) grayscale(100%) sepia(40%) hue-rotate(295deg) saturate(900%) brightness(100%) contrast(100%) !important;
}

body.dark-mode #statuscafe{
  border: 1.5px solid #000 !important;
}

body.dark-mode .header-logo{
  content: url("https://gelli.moe/gelli-logo-2.png");
}

body.dark-mode .banner-oc{
  content: url("https://gelli.moe/gelli-oc-2.png");
  filter:
    drop-shadow(2px 0 0 #ff48a3)
    drop-shadow(-2px 0 0 #ff48a3)
    drop-shadow(0 2px 0 #ff48a3)
    drop-shadow(0 -2px 0 #ff48a3)
    drop-shadow(2px 2px 0 #fff)
    drop-shadow(-2px -2px 0 #fff)
    drop-shadow(2px -2px 0 #fff)
    drop-shadow(-2px 2px 0 #fff);
}

body.dark-mode .corner-sticker{
  content: url("https://gelli.moe/gelli-chibi-4.png");
  filter: drop-shadow(1px 1px 5px #ff48a3);
}

body.dark-mode .featured-simple-img:hover{
  box-shadow: 0 0 20px #494949;
}

body.dark-mode .hover-note{
  background: #fff;
  color: #000;
  border: 1px solid #000;
  box-shadow: 0 0 5px #000;
}

/* update box */
body.dark-mode .update-box{
  border: 1.5px solid #000;
  background: url('https://gelli.moe/962.gif') repeat;
  color: #5a4963;
}

body.dark-mode .update-tab{
  color: #fff;
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
  border: 1px solid #000;
  -webkit-text-stroke: 1px #ff69b4;
  text-shadow: 1px 1px 0 #ff69b4,
               -1px -1px 0 #ff69b4,
               1px -1px 0 #ff69b4,
               -1px 1px 0 #ff69b4;
  filter: drop-shadow(0 0 2px #000);
}

body.dark-mode .update-lace{
  border-image: url('https://gelli.moe/black-lace-border.png') 6 fill round;
  background: transparent;
  filter: drop-shadow(0 0 2px #ff8abf);
}

body.dark-mode .update-lace li{
  color: #fff;
}

body.dark-mode .update-date{
  color: #ff86b4;
}

body.dark-mode .update-lace a{
  color: #ff86b4;
}

body.dark-mode .update-lace a:hover{
  color: #ff5ea4;
}

body.dark-mode .update-lace::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    #4a0025 0%,
    #7a003d 50%,
    #b3005c 100%
  );
  border: 1px solid #ff4fa3;
  box-shadow: inset 0 0 6px #5c002e,
              inset 0 0 10px #ff86b4;
}

body.dark-mode .update-lace::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #ffd1e8 0%,
    #ff86b4 45%,
    #ff2f92 100%
  );
  border: 1.5px solid #c8006a;
}

body.dark-mode .update-lace::-webkit-scrollbar-thumb:hover {
   background: linear-gradient(
    180deg,
    #ffe9f4 0%,
    #ffc7e3 35%,
    #ff8fc2 100%
  );
}

body.dark-mode .update-lace::-webkit-scrollbar-corner {
  background: #5a002d;
}

/* poll */
body.dark-mode .poll-box{
  background: #fff;
  border: 1.5px solid #000;
  color: #000;
}

body.dark-mode .poll-box label{
  color: #ff33bb;
}

body.dark-mode .poll-box::before{
  background: url("https://gelli.moe/black-white-lace.png") repeat-x;
  background-size: 70px 40px;
}

body.dark-mode .poll-box::after{
  background: url("https://gelli.moe/black-white-lace.png") repeat-x;
  background-size: 70px 40px;
}

body.dark-mode .poll-form input[type="submit"]{
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
  border: 1.5px solid #000;
  color: #fff;
}

body.dark-mode .poll-form input[type="submit"]:hover{
  background: linear-gradient(#ff339d, #000);
  color: #fff;
}

/* status cafe */
body.dark-mode #statuscafe{
  background: #fff;
  border: 1.5px solid #000;
  color: #000;
}

body.dark-mode #statuscafe::before{
  background: url('https://gelli.moe/pink-black-white-polka-dot-lace.gif') repeat-x top left;
  background-size: 70px 45px;
}

body.dark-mode #statuscafe::after{
  background: url('https://gelli.moe/pink-black-white-polka-dot-lace-2.gif') repeat-x top left;
  background-size: 70px 45px;
}

body.dark-mode #statuscafe-username a{
  color: #ff4fa3;
}

body.dark-mode #statuscafe-username a:hover{
  color: #ff0090;
}

/* gallery */
body.dark-mode .gallery-box{
  background: #fff9fc;
  border: 1.5px solid #000;
}

body.dark-mode .gallery-img{
  background: #fff;
  filter: grayscale(100%) sepia(50%) hue-rotate(293deg) saturate(500%) brightness(100%) contrast(110%);
}

/* calendar */
body.dark-mode .calendar-container{
  background: #fff;
  border: 1.5px solid #000;
}

body.dark-mode .calendar-title{
  color: #fff;
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
  border: 1.5px solid #000;
}

body.dark-mode .calendar-container th,
body.dark-mode .calendar-container td{
  color: #fff;
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
  border: 1.5px solid #fff;
}

body.dark-mode .calendar-container td:hover{
  background: #ff00a2;
}

body.dark-mode .calendar-container td.today{
  color: #fff !important;
  background: linear-gradient(to bottom, #ff79ba, #ff00a2) !important;
  box-shadow: 0 0 0 1.5px #fff inset;
}

/* fader */
body.dark-mode .fader-outer{
  border: 1.5px solid #000;
  background-image: radial-gradient(#ffffff 25%, transparent 25%),
                    radial-gradient(#ffffff 25%, transparent 25%);
  background-color: #000;
  background-size: 20px 20px;
}

body.dark-mode .image-fader{
  border: 1.5px solid var(--pink-border);
  background-image: url("https://gelli.moe/bgheartsribbonspink.gif");
}

body.dark-mode .image-fader img{
  filter: grayscale(100%) sepia(50%) hue-rotate(293deg) saturate(700%) brightness(100%) contrast(110%) drop-shadow(0 0 2px #ff9bc3);
}

/* footer */
body.dark-mode .footer-credit{
  color: var(--pink-text);
  border: 1px solid #000;
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 50%, #000000 100%);
}

/* player */
body.dark-mode .draggable-player{
  background: linear-gradient(to bottom, #ffe6f4 0%, #ffd2e9 50%, #fcb3d9 100%);
  border: 2px solid #000;
  box-shadow: 0 0 10px 0 #ff7fb9;
}

body.dark-mode .player-header{
  background: #fff;
  color: #000;
  border-bottom: 2px solid #000;
}

body.dark-mode .song-title{
  color: #fff;
  text-shadow: 1px 1px 0 #ff48a3,
               -1px -1px 0 #ff48a3,
               1px -1px 0 #ff48a3,
               -1px 1px 0 #ff48a3;
  filter: drop-shadow(0 0 2px rgba(255, 56, 152, 0.85));
}

body.dark-mode .progress-bar-area span{
  color: #fff;
  text-shadow: 1px 1px 0 #ff48a3,
               -1px -1px 0 #ff48a3,
               1px -1px 0 #ff48a3,
               -1px 1px 0 #ff48a3;
  filter: drop-shadow(0 0 2px rgba(255, 56, 152, 0.85));
}

body.dark-mode .progress-bar{
  background: #fff;
}

body.dark-mode .progress-bar::-webkit-slider-thumb{
  background: #ff48a3;
  border: 2px solid #fff;
  box-shadow: 0 0 4px #ff48a3;
}

body.dark-mode .controls button{
  background: #fff;
  border: 1.5px solid #000;
  color: #ff48a3;
}

/* sticker */
body.dark-mode .corner-sticker{
  filter: drop-shadow(1px 1px 5px #ff48a3);
}

body.dark-mode{
  box-shadow: inset -2px 0 0 #121212 !important;
}

body.dark-mode{
  background-image:
    linear-gradient(to left, #121212 0, #121212 4px, transparent 4px),
    url('https://gelli.moe/black-gray-paws.png') !important;
  background-position: right top, left top !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 4px 100%, 700px 300px !important;
}

@media (max-width: 600px) {
  body.dark-mode::before,
  body.dark-mode::after {
    height: 28px !important;
    background-size: 80px 25px !important;
  }
}

/* =========================================
   PHONE + IPAD + TABLET RESPONSIVE CSS
   paste at the VERY BOTTOM of your css
========================================= */

@media (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
  }

  body {
    padding-top: 18px !important;
    padding-bottom: 78px !important;
  }

  body::before,
  body::after {
    height: 28px !important;
    background-size: 50px 28px !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .frame {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .scaler {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
    transform-origin: top center !important;
    display: block !important;
    overflow: visible !important;
  }

  .lace-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    border-width: 8px !important;
    border-image-slice: 8 fill !important;
    border-image-repeat: round !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  .pinky {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    border-width: 6px !important;
    border-image-slice: 6 fill !important;
    border-image-repeat: round !important;
    border-radius: 12px !important;
    overflow: visible !important;
  }

  body.dark-mode .lace-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    border-width: 8px !important;
    border-image-slice: 8 fill !important;
    border-image-repeat: round !important;
    border-radius: 14px !important;
    overflow: visible !important;
  }

  body.dark-mode .pinky {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-width: 6px !important;
    border-image-slice: 6 !important;
    border-image-repeat: round !important;
    border-radius: 12px !important;
    overflow: visible !important;
  }

  .banner-container {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    overflow: visible !important;
    position: relative !important;
    margin-bottom: 138px !important;
  }

  .header-banner {
    position: relative !important;
    width: 100% !important;
    min-height: 315px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: block !important;
    border-radius: 12px !important;
    overflow: visible !important;
    background-position: center top !important;
  }

  .header-banner::after {
    display: none !important;
  }

  .banner-oc {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 35 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 255px !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .header-badge {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: calc(100% + 14px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    width: min(400px, calc(100% - 18px)) !important;
    max-width: none !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 15px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    background: #fff !important;
    backdrop-filter: none !important;
  }

  .header-logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 128px !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  .site-url {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.06 !important;
    letter-spacing: 0.5px !important;
    font-size: 20px !important;
  }

  .rainbow-inner,
  .scroll-imgs,
  .scroll-imgs2 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .marquee {
    height: 24px !important;
    padding: 8px 0 !important;
  }

  .rainbow-text {
    font-size: 15px !important;
  }

  .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }

  .left-rail,
  .middle,
  .right-rail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .offsite-wrapper,
  .profile-scroll-box,
  .featured-simple-box,
  .gallery-box,
  .calendar-container,
  .site-box,
  .update-box,
  #statuscafe,
  .fader-outer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .offsite-wrapper {
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .profile-scroll-box {
    max-height: none !important;
    padding: 14px !important;
  }

  .profile-flex-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
  }

  .profile-desc {
    text-align: center !important;
  }

  .middle > div[style*="display:flex"][style*="align-items:flex-start"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .featured-simple-box,
  .site-box,
  .update-box,
  .calendar-container {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

@media (min-width: 601px) and (max-width: 1024px) {
  .middle > div[style*="display:flex"][style*="align-items:flex-start"] {
    align-items: stretch !important;
  }

  .header-badge {
    width: calc(103% - 20px) !important;
    height: 115px !important;
    max-width: calc(150% - 20px) !important;
    min-width: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
  
  .banner-oc {
    width: 320px !important;
    max-width: none !important;
    height: auto !important;
  }

@media (min-width: 601px) and (max-width: 1024px) {
  .corner-sticker {
    width: 430px !important;
    max-width: none !important;
    height: auto !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

  .poll-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  .poll-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .theme-corner .theme-toggle-btn {
    font-size: 20px !important;
    padding: 10px 16px !important;
    min-width: 120px !important;
    line-height: 1.2 !important;
    transform: scale(1.08) !important;
    transform-origin: bottom left !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .theme-corner .theme-panel {
    width: 145px !important;
    padding: 10px !important;
    bottom: calc(100% + 8px) !important;
  }

  .theme-corner .theme-mode-btn {
    font-size: 16px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {
    padding-top: 20px !important;
  }

  body.dark-mode::before,
  body.dark-mode::after {
    height: 28px !important;
    background-size: 95px 25px !important;
  }
}

  .featured-simple-box {
    padding: 12px !important;
  }

  .featured-simple-img {
  width: min(240px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

  .featured-simple-title,
  .nav-title,
  .offsite-title,
  .site-title {
    font-size: 1.45rem !important;
  }

  .gallery-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    height: auto !important;
  }

  .gallery-img {
    width: 100% !important;
    height: 115px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  .calendar-container th,
  .calendar-container td {
    font-size: 10px !important;
    padding: 4px 2px !important;
  }

  .fader-outer {
    height: 260px !important;
    top: 0 !important;
    margin-top: 10px !important;
    padding: 8px !important;
  }

  .image-fader {
    height: 100% !important;
  }

  .bottom-wrapper {
    width: 100% !important;
    margin-top: 10px !important;
    margin-inline: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }

  .updates-flex {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .site-box-inner,
  .update-lace {
    overflow: visible !important;
    max-height: none !important;
  }

  .site-box-inner code {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  #statuscafe {
    min-height: 250px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .scroll-track img {
    height: 36px !important;
  }

  .scroll-track2 img {
    height: 24px !important;
  }

  .nav-btn,
  .offsite-btn {
    font-size: 15px !important;
    padding: 9px 12px !important;
  }

  .draggable-player {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    transform-origin: center !important;
    width: min(270px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    margin: 12px auto 0 !important;
    z-index: 30 !important;
  }

  .player-header {
    cursor: default !important;
  }

  .corner-sticker {
    width: 170px !important;
    max-width: none !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .theme-corner {
    position: fixed !important;
    left: 8px !important;
    bottom: 8px !important;
    z-index: 2147483646 !important;
  }

  .theme-toggle-btn {
    font-size: 16px !important;
    padding: 7px 10px !important;
  }

  .theme-panel {
    width: 110px !important;
    padding: 6px !important;
    left: 0 !important;
    bottom: calc(100% + 6px) !important;
  }

  .theme-mode-btn {
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
}

@media (max-width: 420px) {
  .lace-wrap {
    border-width: 7px !important;
    padding: 2px !important;
  }

  .pinky {
    border-width: 5px !important;
  }

  .banner-container {
    margin-bottom: 118px !important;
  }

  .header-banner {
    min-height: 285px !important;
  }

  .banner-oc {
    width: 290px !important;
    bottom: 0 !important;
  }

  .header-badge {
    top: calc(100% + 10px) !important;
    width: min(500px, calc(100% - 16px)) !important;
    height: 100px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
  }

  .header-logo {
    width: 112px !important;
  }

  .site-url {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .gallery-box {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .gallery-img {
    height: 100px !important;
  }

  .corner-sticker {
    width: 150px !important;
  }

  .theme-corner {
    left: 6px !important;
    bottom: 6px !important;
  }
}

@media (max-width: 600px){
  .poll-form{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: block !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  .poll-box{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* LIGHT MODE: keep stamps normal, keep fader pink glow */
body:not(.dark-mode) .scroll-track img,
body:not(.dark-mode) .scroll-track2 img{
  filter: none !important;
}

body:not(.dark-mode) .image-fader img{
  filter: drop-shadow(0 0 2px #ff9bc3ff) !important;
}

/* force fader images to reset in light mode */
body:not(.dark-mode) .image-fader img{
  filter: drop-shadow(0 0 2px #ff9bc3ff) !important;
}

body.dark-mode .image-fader img{
  filter: grayscale(100%) sepia(50%) hue-rotate(293deg) saturate(700%) brightness(100%) contrast(110%) drop-shadow(0 0 2px #ff9bc3) !important;
}

body.dark-mode{
  background-color: #121212 !important;
  background-image: url("https://gelli.moe/black-gray-paws.png") !important;
  background-repeat: repeat !important;
  background-position: top left !important;
  background-size: 700px 300px !important;
  box-shadow: inset -4px 0 0 #121212 !important;
}

  </style>
 </head>
 <body>
   <!-- Corner sticker -->
  <img class="corner-sticker" alt="chibi gelli" src="https://gelli.moe/gelli-chibi-3.png"/>
  <div class="frame">
  <div class="scaler">
  <div class="lace-wrap">
  <div class="lace-header pinky">

   <!-- Header/banner section -->
<div class="banner-container">
  <div class="header-banner">
    <img class="banner-oc" alt="gelli oc" src="https://gelli.moe/gelli-oc.png"/>

    <div class="header-badge">
      <img class="header-logo" alt="Logo" src="https://gelli.moe/gelli-logo.png"/>
      <span class="site-url">gelli.moe</span>
</div>
</div>
   </div>
   <!-- Scrolling marquee greeting -->
<div class="rainbow-inner rainbow-bordered scroll-spacing">
  <div class="marquee">
    <div class="marquee-track">
      <span class="rainbow-text">
        <img src="https://gelli.moe/pink-sparkle-heart-pixel.gif" style="height:20px; margin-top: -5px; vertical-align:middle"/>
        haii angel!! :3 welcome to my site!!
        <img src="https://gelli.moe/pink-wings.gif" style="height:20px; margin-top: -5px; vertical-align:middle"/>
      </span>
    </div>
  </div>
</div>
   <!-- Three-column layout -->
   <div class="row">
    <!-- LEFT COLUMN -->
    <div class="left-rail">
     <!-- Sidebar with nav & offsite links -->
     <div class="offsite-wrapper">
      <div class="offsite-box">
       <!-- Navigation section -->
       <div class="nav-section">
        <div class="nav-title">navigation</div>
        <div class="nav-links">
         <a class="nav-btn" href="https://gelli.moe/about-me"><img class="nav-icon" src="https://gelli.moe/cat-paw-pixel.gif"/>about me</a>
         <a class="nav-btn" href="https://gelli.moe/positivity"><img class="nav-icon" src="https://gelli.moe/cat-paw-pixel.gif"/>positivity</a>
         <a class="nav-btn" href="https://gelli.moe/art"><img class="nav-icon" src="https://gelli.moe/cat-paw-pixel.gif"/>art</a>
         <a class="nav-btn" href="https://gelli.moe/roblox-fits"><img class="nav-icon" src="https://gelli.moe/cat-paw-pixel.gif"/>roblox fits</a>
         <a class="nav-btn" href="https://gelli.moe/plushie-room"><img class="nav-icon" src="https://gelli.moe/cat-paw-pixel.gif"/>plushie room</a>
         <a class="nav-btn" href="https://gelli.moe/stamp-collection"><img class="nav-icon" src="https://gelli.moe/cat-paw-pixel.gif"/>stamp collection</a>
         <a class="nav-btn" href="https://gelli.moe/site-archive"><img class="nav-icon" src="https://gelli.moe/cat-paw-pixel.gif"/>site archive</a>
        </div>
       </div>
       
       <!-- my ocs section -->
       <div class="nav-section">
        <div class="nav-title">my ocs</div>
        <div class="nav-links">
         <a class="nav-btn" href="https://gelli.moe/gelli-and-tami-oc-references"><img class="nav-icon" src="https://gelli.moe/charmmy-kitty-pixel-2.gif"/>gelli and tami</a>
         <a class="nav-btn" href="https://gelli.moe/datchi-oc-references"><img class="nav-icon" src="https://gelli.moe/red-bow-pixel.gif"/>datchi</a>
        </div>
       </div>

       <!-- Offsite links section -->
       <div class="offsite-section">
        <div class="offsite-title">offsite</div>
        <div class="offsite-links">
         <a class="offsite-btn" href="https://www.youtube.com/@peanutbutterandgelli" target="_blank"><img class="icon" src="https://gelli.moe/pink-bow-pixel.gif" style="height:20px;width:20px;vertical-align:middle;margin-right:7px;"/>youtube</a>
         <a class="offsite-btn" href="https://www.instagram.com/sweetmoedoll" target="_blank"><img class="icon" src="https://gelli.moe/pink-bow-pixel.gif" style="height:20px;width:20px;vertical-align:middle;margin-right:7px;"/>instagram</a>
         <a class="offsite-btn" href="https://gelli.shop" target="_blank"><img class="icon" src="https://gelli.moe/pink-bow-pixel.gif" style="height:20px;width:20px;vertical-align:middle;margin-right:7px;"/>shop</a>
         <a class="offsite-btn" href="https://www.roblox.com/users/2710150946/profile" target="_blank"><img class="icon" src="https://gelli.moe/pink-bow-pixel.gif" style="height:20px;width:20px;vertical-align:middle;margin-right:7px;"/>roblox profile</a>
         <a class="offsite-btn" href="https://www.roblox.com/communities/33509325/peanutbutterandgelli#!/about" target="_blank"><img class="icon" src="https://gelli.moe/pink-bow-pixel.gif" style="height:20px;width:20px;vertical-align:middle;margin-right:7px;"/>roblox group</a>
         <a class="offsite-btn" href="https://www.roblox.com/games/16347108972/gellis-kawaii-cutecore-house" target="_blank"><img class="icon" src="https://gelli.moe/pink-bow-pixel.gif" style="height:20px;width:20px;vertical-align:middle;margin-right:7px;"/>roblox game</a>
        </div>
       </div>
      </div>
     </div>
     <!-- Link my site and StatusCafe boxes moved to bottom section -->
    </div>
    <!-- END LEFT COLUMN -->

    <!-- MIDDLE COLUMN CONTENT -->
    <div class="middle">
     <div class="profile-scroll-box">

  <!-- FIRST SECTION -->
  <div class="profile-flex-row">
    <img src="https://gelli.moe/gelli-cc.png"
         style="width:180px;height:auto;border-radius:10px;border:1.8px solid #ff89c2;margin-right:20px;" />

    <div class="profile-desc">
      haii :3 welcome to gelli's kawaii world! :D<br/>
      this is a place for my artwork and my creativity ^^<br/>
      enjoy ur time here <img src="https://gelli.moe/pink-sparkle-heart-pixel.gif" style="height:16px;vertical-align:middle;margin-top:-2px;"><br/>
    </div>
  </div>


 <!-- SECOND SECTION (shows when scrolling) -->
<div class="profile-flex-row">

  <div class="profile-desc">
    site is best viewed on pc <img src="https://gelli.moe/pink-paw-pixel.webp" style="height:16px;vertical-align:middle;margin-top:-2px;"><br/>
    I love to share my interest and love for things :D<br/>
    thank u for visiting my site <img src="https://gelli.moe/pink-sparkle-hearts.gif" style="height:16px;vertical-align:middle;margin-top:-2px;"><br/>
  </div>

  <img src="https://gelli.moe/charmmy-kitty-2.gif"
       style="width:160px;height:auto;border-radius:10px;filter: drop-shadow(0 0 3px #ff6ab2bf);" />

</div>


</div>
     <!-- Scrolling stamps in middle -->
     <div class="rainbow-inner rainbow-bordered scroll-imgs">
      <div class="scroll-track">
       <img src="https://gelli.moe/5c30a8ad.gif"/>
       <img src="https://gelli.moe/tumblr_78c47276a4b673b9f921e6bb2e0a1739_1c2c28cc_100.png"/>
       <img src="https://gelli.moe/tumblr_13493b13237b507288bbb1c2a32a7265_1a6b39cb_250.webp"/>
       <img src="https://gelli.moe/stamp-1.gif"/>
       <img src="https://gelli.moe/d9p8wux-37972707-cdc2-44be-b273-f529577dd987.gif"/>
       <img src="https://gelli.moe/ancrzu.gif"/>
       <img src="https://gelli.moe/tumblr_07ff324b9ea760b872e7786a450c5a4f_ec4a1d05_100.webp"/>
       <img src="https://gelli.moe/txnpxu.gif"/>
       <img src="https://gelli.moe/iloveyou.gif"/>
       <img src="https://gelli.moe/stamp-14.gif"/>
       <img src="https://gelli.moe/avWUdqq.gif"/>
      </div>
     </div>
     <!-- Featured image and poll side-by-side -->
     <div style="display:flex; gap:10px; align-items:flex-start;">
      <div class="featured-simple-box">
       <div class="featured-simple-title">featured image :3</div>
       <div class="hover-wrap">
      <img 
        class="featured-simple-img" 
        alt="Featured Image" 
        src="https://gelli.moe/gelli-featured-image.png"
      />
      <span class="hover-note">me in real life :3</span>
    </div>

      </div>
      <form class="poll-form" action="https://poll.pollcode.com/82241552" method="post">
       <div class="poll-box">
        <div style="padding:6px 4px 6px;font-size:1.5rem;font-family:'Lovely Bubbles'"><strong>favorite dessert?</strong></div>
        <input id="answer822415521" name="answer" style="float:left" type="radio" value="1"/>
        <label for="answer822415521" style="float:left;width:150px;">cupcakes</label>
        <div style="clear:both;height:2px;"></div>
        <input id="answer822415522" name="answer" style="float:left" type="radio" value="2"/>
        <label for="answer822415522" style="float:left;width:150px;">ice cream</label>
        <div style="clear:both;height:2px;"></div>
        <input id="answer822415523" name="answer" style="float:left" type="radio" value="3"/>
        <label for="answer822415523" style="float:left;width:150px;">donuts</label>
        <div style="clear:both;height:2px;"></div>
        <input id="answer822415524" name="answer" style="float:left" type="radio" value="4"/>
        <label for="answer822415524" style="float:left;width:150px;">other</label>
        <div style="clear:both;height:2px;"></div>
        <div align="center" style="padding:12px;">
         <input type="submit" value=" Vote "/>
         <input name="view" type="submit" value=" View "/>
        </div>
        <div align="right" style="font-size:10px;font-family:'Lovely Bubbles'">pollcode.com <a href="https://pollcode.com/">free polls</a></div>
       </div>
      </form>
     </div>
    </div>
    <!-- END MIDDLE COLUMN -->

    <!-- RIGHT COLUMN -->
    <div class="right-rail">
     <!-- Gallery -->
     <div class="gallery-box">
      <img class="gallery-img" alt="gallery 1" src="https://gelli.moe/image-02-1.gif"/>
      <img class="gallery-img" alt="gallery 2" src="https://gelli.moe/9.gif"/>
      <img class="gallery-img" alt="gallery 3" src="https://gelli.moe/239f529dcc92bde8178b5601d35b2cfe.jpg"/>
      <img class="gallery-img" alt="gallery 4" src="https://gelli.moe/valentines-day-hello-kitty.jpeg"/>
     </div>
<!-- Calendar and clock -->
<div class="calendar-container" style="margin-top: -2px;">
  <div class="calendar-title">april 2026</div>

  <table id="calendar-table">
    <table id="calendar-table">
  <thead>
    <tr>
      <th>S</th>
      <th>M</th>
      <th>T</th>
      <th>W</th>
      <th>T</th>
      <th>F</th>
      <th>S</th>
    </tr>
  </thead>

  <tbody>
    <tr><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
    <tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
    <tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
    <tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
  </table>
  <div class="clock-container" id="clock" style="margin-top:8px;border:1.5px solid var(--pink-border);border-radius:8px;padding:6px;background: linear-gradient(to bottom, #ffe6f4ff 0%, #ffd2e9ff 50%, #fcb3d9ff 100%); color:#ff50a8;text-align:center;font-weight:bold;">00:00:00 pm</div>
     </div>
    </div>
    <!-- END RIGHT COLUMN -->
   </div>

<!-- bottom-wrapper stays INSIDE the lace card -->
   <div class="bottom-wrapper" style="display:flex; justify-content:center; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-top:-15px; transform:translateX(20px);">

  <div class="site-box">
  <div class="site-box-inner">

    <p class="site-title">link my site :3</p>
    <img alt="gelli's button" src="https://gelli.moe/gellisitebutton.png"/>
    </a>

    <!-- Add more buttons here if you want -->
    <!--
    <a href="https://another-site.com" target="_blank">
      <img alt="another button" src="https://another-site.com/button.png"/>
    </a>
    -->

    <code>
      &lt;a href="https://gelli.moe" target="_blank"&gt;<br/>
      &lt;img src="https://gelli.moe/gellisitebutton.png" alt="gelli's button"&gt;<br/>
      &lt;/a&gt;
    </code>
  </div>
</div>

  <!-- status cafe -->
  <div style="padding:2px; background:none; border-radius:5px;">
    <div style="width:100%; text-align:center;">
      <div id="statuscafe" style="width:220px; height:251px; background:#ffffff; border:1.5px solid var(--pink-border); border-radius:10px; padding:0 5px; margin-top:2px; auto; font-family:'Comic Sans MS', sans-serif; color:#ff89c2; box-shadow:none; text-align:center; position:relative; overflow:hidden;">
        <div id="statuscafe-username" style="font-weight:normal; font-size:1.08rem; margin-bottom:0.2em; color:#ff89c2; letter-spacing:1px;"></div>
        <div id="statuscafe-content" style="margin:0 0 0.5em 0; padding:0.6em 0.8em 0.2em 0.8em; border-radius:10px; font-size:1.08em; color:#ff89c2;"></div>
      </div>
    </div>
  </div>

  <!-- update + fader grouped together -->
  <div class="updates-flex">
    <div class="update-box">
      <div class="update-tab">update log</div>
      <div class="update-lace">
        <ul>
        <li><span class="update-date">4/7/26:</span> V2 OUT NOW!!!! :D 🎉 if ur reading this, ur currently viewing v2 rn :3 also, <a href="/site-archive.html">site archive</a> is out now too, if u wanna view my old site layouts ^^ there will also no longer be an intro page when u first enter this site
        <li><span class="update-date">3/13/26:</span> new art on <a href="/art.html">art page</a> :3</li>
        <li><span class="update-date">2/23/26:</span> NEW <a href="/datchi-oc-references.html">DATCHI OC PAGE</a> OUT NOW!!! :D</li>
        <li><span class="update-date">2/21/26:</span> 9 new fits on <a href="/roblox-fits.html">roblox fits page</a> ^^</li>
        <li><span class="update-date">2/17/26:</span> new "my ocs" section under links area - gelli and tami have their own page and any other ocs I have in the future will also have their own pages!! :D</li>
        <li><span class="update-date">12/25/25:</span> new art on <a href="/art.html">art page</a> :3</li>
        <li><span class="update-date">12/13/25:</span> <a href="/stamp-collection.html">STAMP COLLECTION</a> IS OUT NOW!!! :3</li>
        <li><span class="update-date">12/6/25:</span> new fit on <a href="/roblox-fits.html">roblox fits page :D</li>
        <li><span class="update-date">11/28/25:</span> new art on <a href="/art.html">art page</a> c: - </span> 5 new fits on my <a href="/roblox-fits.html">roblox fits page</a> and my username is listed on my roblox fits page for anyone who wants to get inspo :3
        </ul>
      </div>
    </div>

    <div class="fader-outer" style="margin-top: 30px;">
      <div class="image-fader">
        <img src="https://gelli.moe/hk63.webp" alt="image 1">
        <img src="https://gelli.moe/po.webp" alt="image 2">
        <img src="https://gelli.moe/hk73.webp" alt="image 3">
        <img src="https://gelli.moe/tumblr_inline_miau7k4CDD1qz4rgp540.gif" alt="image 4">
        <img src="https://gelli.moe/321.gif" alt="image 5">
      </div>
    </div>
  </div>
  </div> <!-- closes .bottom-wrapper -->

  <div class="scroll-imgs2">
    <div class="scroll-track2">
      <img alt="blinkie" src="https://gelli.moe/63da1292.gif"/>
      <img alt="blinkie" src="https://gelli.moe/e239b17f.gif"/>
      <img alt="blinkie" src="https://gelli.moe/6311d932.gif"/>
      <img alt="blinkie" src="https://gelli.moe/2f51b6a5.gif"/>
      <img alt="blinkie" src="https://gelli.moe/169a9538.gif"/>
      <img alt="blinkie" src="https://gelli.moe/c6c4618d.gif"/>
      <img alt="blinkie" src="https://gelli.moe/13bede76.gif"/>
      <img alt="blinkie" src="https://gelli.moe/7dec8d3a.gif"/>
      <img alt="blinkie" src="https://gelli.moe/d6ac4299.gif"/>
    </div>
  </div>

<div class="footer-credit-wrap">
  <div class="footer-credit">
    <img src="https://gelli.moe/pink-sparkle-heart-pixel.gif" style="width:20px;height:20px;vertical-align:middle;margin:0 0px;">
    gelli · est. 2025
    <img src="https://gelli.moe/pink-sparkle-heart-pixel.gif" style="width:20px;height:20px;vertical-align:middle;margin:0 0px;">
  </div>
</div>

</div> <!-- closes .pinky -->

<div class="draggable-player" id="music-player">
  <div class="player-header" id="player-header">♡ music player ♡</div>
  <div class="song-title" id="song-title">song title</div>
  <div class="progress-bar-area">
    <span id="current-time">0:00</span>
    <input class="progress-bar" id="progress-bar" max="100" min="0" type="range" value="0"/>
    <span id="duration">0:00</span>
  </div>
  <audio id="audio" preload="auto"></audio>
  <div class="controls">
    <button id="prev-btn" title="Previous Song">&lt;&lt;</button>
    <button id="play-btn" title="Play/Pause">▶</button>
    <button id="next-btn" title="Next Song">&gt;&gt;</button>
  </div>
</div>

</div> <!-- closes .frame -->

<div class="theme-corner">
  <button class="theme-toggle-btn" id="theme-toggle-btn">themes</button>

  <div class="theme-panel" id="theme-panel">
    <button class="theme-mode-btn" id="light-mode-btn">light mode</button>
    <button class="theme-mode-btn" id="dark-mode-btn">dark mode</button>
  </div>
</div>

  <!-- JavaScript for interactive features -->
  <script>
    // Blinkies pause on hover
    document.querySelectorAll('.scroll-imgs2').forEach(box => {
      const track = box.querySelector('.scroll-track2');
      if(!track) return;
      box.addEventListener('mouseover', () => { track.style.animationPlayState = 'paused'; });
      box.addEventListener('mouseout', () => { track.style.animationPlayState = 'running'; });
    });
    document.querySelectorAll('.scroll-imgs').forEach(box => {
      const track = box.querySelector('.scroll-track');
      if(!track) return;
      box.addEventListener('mouseover', () => { track.style.animationPlayState = 'paused'; });
      box.addEventListener('mouseout', () => { track.style.animationPlayState = 'running'; });
    });

    // Clock + highlight today
    function updateClock(){
      const now=new Date();
      let hrs=now.getHours(), min=now.getMinutes(), sec=now.getSeconds(), ampm=hrs>=12?'pm':'am';
      hrs=hrs%12; hrs=hrs?hrs:12;
      const pad=n=>n<10?'0'+n:n;
      const el=document.getElementById('clock');
      if(el) el.textContent=`${pad(hrs)}:${pad(min)}:${pad(sec)} ${ampm}`;
    }
    function highlightToday(){
      const now=new Date(), today=now.getDate();
      document.querySelectorAll("#calendar-table td").forEach(td=>{
        if(td.textContent.trim()===today.toString()) td.classList.add("today");
        else td.classList.remove("today");
      });
    }
    setInterval(updateClock,1000); updateClock(); highlightToday();

    // Disable right-click/dblclick & dragging images
    document.addEventListener('contextmenu', e=>e.preventDefault(), false);
    document.addEventListener('dblclick', e=>e.preventDefault(), false);
    document.addEventListener('DOMContentLoaded', ()=>{
      document.querySelectorAll('img').forEach(img=>{
        img.setAttribute('draggable','false');
        img.addEventListener('mousedown', e=>e.preventDefault());
      });
    });

    // Music player
    const songs=[
      { name: " you are my music - hi-posi", url: "https://gelli.moe/you-are-my-music-sped-up.mp3" },
      { name: "electronica jam - elektel", url: "https://gelli.moe/electronica-jam.mp3" },
      { name: "summerlove - s connection", url: "https://gelli.moe/summerlove-s-connection-radio-edit-sped-up.mp3" },
      { name: "bar bar bar - crayon pop", url: "https://gelli.moe/bar-bar-bar-crayon-pop-sped-up.mp3" },
    ];
    let currentSong=0;
    const audio=document.getElementById('audio');
    const title=document.getElementById('song-title');
    const playBtn=document.getElementById('play-btn');
    const prevBtn=document.getElementById('prev-btn');
    const nextBtn=document.getElementById('next-btn');
    const progressBar=document.getElementById('progress-bar');
    const currentTimeElem=document.getElementById('current-time');
    const durationElem=document.getElementById('duration');
    function formatTime(s){const m=Math.floor(s/60),sec=Math.floor(s%60).toString().padStart(2,'0');return `${m}:${sec}`;}
    function loadSong(i){ title.textContent=songs[i].name; audio.src=songs[i].url; audio.pause(); playBtn.innerHTML='\u25B6'; progressBar.value=0; currentTimeElem.textContent='0:00'; durationElem.textContent='0:00'; }
    function playPause(){ if(audio.paused){ audio.play(); playBtn.innerHTML='\u23F8'; } else { audio.pause(); playBtn.innerHTML='\u25B6'; } }
    function prevSong(){ currentSong=(currentSong-1+songs.length)%songs.length; loadSong(currentSong); playPause(); }
    function nextSong(){ currentSong=(currentSong+1)%songs.length; loadSong(currentSong); playPause(); }
    audio.addEventListener('ended', nextSong);
    playBtn.addEventListener('click', playPause);
    prevBtn.addEventListener('click', prevSong);
    nextBtn.addEventListener('click', nextSong);
    audio.addEventListener('loadedmetadata', ()=>{ durationElem.textContent=formatTime(audio.duration); progressBar.max=Math.floor(audio.duration||0); });
    audio.addEventListener('timeupdate', ()=>{ currentTimeElem.textContent=formatTime(audio.currentTime||0); progressBar.value=Math.floor(audio.currentTime||0); });
    progressBar.addEventListener('input', e=>{ audio.currentTime=e.target.value; });
    loadSong(currentSong);
    // Draggable player functionality
    (function(){
      const player=document.getElementById('music-player');
      const header=document.getElementById('player-header');
      let ox=0, oy=0, down=false;
      header.addEventListener('mousedown', e=>{
        down=true; ox=e.clientX-player.offsetLeft; oy=e.clientY-player.offsetTop;
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', up, { once:true });
      });
      function move(e){ if(!down) return; player.style.left=(e.clientX-ox)+'px'; player.style.top=(e.clientY-oy)+'px'; }
      function up(){ down=false; document.removeEventListener('mousemove', move); }
    })();

const themeToggleBtn = document.getElementById('theme-toggle-btn');
const themePanel = document.getElementById('theme-panel');
const lightModeBtn = document.getElementById('light-mode-btn');
const darkModeBtn = document.getElementById('dark-mode-btn');

function applyTheme(theme){
  const faderImgs = document.querySelectorAll('.image-fader img');

  if(theme === 'dark'){
    document.body.classList.add('dark-mode');
    localStorage.setItem('gelliTheme', 'dark');

    faderImgs.forEach(img => {
      img.style.filter = 'grayscale(100%) sepia(50%) hue-rotate(293deg) saturate(700%) brightness(100%) contrast(110%) drop-shadow(0 0 2px #ff9bc3)';
    });
  } else {
    document.body.classList.remove('dark-mode');
    localStorage.setItem('gelliTheme', 'light');

    faderImgs.forEach(img => {
      img.style.filter = 'drop-shadow(0 0 2px #ff9bc3ff)';
    });
  }
}

themeToggleBtn.addEventListener('click', () => {
  themePanel.classList.toggle('show');
});

lightModeBtn.addEventListener('click', () => {
  applyTheme('light');
});

darkModeBtn.addEventListener('click', () => {
  applyTheme('dark');
});

const savedTheme = localStorage.getItem('gelliTheme');
if(savedTheme === 'dark'){
  applyTheme('dark');
} else {
  applyTheme('light');
}

  </script>
  <!-- StatusCafe script to populate username/content -->
  <script src="https://status.cafe/current-status.js?name=gelli" defer></script>

  <script>
    const originalTitle = "♡   gelli's site   ";
    let scrollTitle = originalTitle;

    setInterval(() => {
      scrollTitle = scrollTitle.slice(1) + scrollTitle[0];
      document.title = scrollTitle;
    }, 250);
  </script>
 </body>
</html>