MawataMio - Separate Desktop & Mobile Headers // Sync active link based on hash for both headers function setActiveLinks() { const hash = window.location.hash || '#home'; const desktopLinks = document.querySelectorAll('.desktop-header a'); const mobileLinks = document.querySelectorAll('.mobile-header a'); function updateLinks(links) { links.forEach(link => { if(link.getAttribute('href') === hash) { link.classList.add('active'); } else { link.classList.remove('active'); } }); } updateLinks(desktopLinks); updateLinks(mobileLinks); } window.addEventListener('hashchange', setActiveLinks); window.addEventListener('load', setActiveLinks); Welcome to my archive of art, stories, and character-driven universes.
MawataMio - Separate Desktop & Mobile Headers // Sync active link based on hash for both headers function setActiveLinks() { const hash = window.location.hash || '#home'; const desktopLinks = document.querySelectorAll('.desktop-header a'); const mobileLinks = document.querySelectorAll('.mobile-header a'); function updateLinks(links) { links.forEach(link => { if(link.getAttribute('href') === hash) { link.classList.add('active'); } else { link.classList.remove('active'); } }); } updateLinks(desktopLinks); updateLinks(mobileLinks); } window.addEventListener('hashchange', setActiveLinks); window.addEventListener('load', setActiveLinks); MawataMio - Separate Desktop & Mobile Headers // Sync active link based on hash for both headers function setActiveLinks() { const hash = window.location.hash || '#home'; const desktopLinks = document.querySelectorAll('.desktop-header a'); const mobileLinks = document.querySelectorAll('.mobile-header a'); function updateLinks(links) { links.forEach(link => { if(link.getAttribute('href') === hash) { link.classList.add('active'); } else { link.classList.remove('active'); } }); } updateLinks(desktopLinks); updateLinks(mobileLinks); } window.addEventListener('hashchange', setActiveLinks); window.addEventListener('load', setActiveLinks); Apocalyptic Symbiosis
Origin of the Symbiosis:
Mio’s connection to the End of Time Being, Varn, began when she wandered into a rift where time itself fractured and grew unstable. Varn is an ancient entity born from the final collapse of all timelines, neither alive nor dead—he is the eternal last breath before the world resets. Their bond is both a blessing and a curse: it grants Mio immense power, but the energy slowly erodes her physical form, marking her with the weight of time’s end.
Effect on Mio’s Body:
When Varn's powers awaken within her, her body undergoes a striking transformation: two additional horns spiral forth, her skin shifts to shades of grey and black, and sharp claws and powerful paws emerge. Her feet reshape into hooves, and a sinuous tail—its tip ablaze with purple fire—lashes behind her. This form radiates a haunting fusion of apocalyptic might and abyssal darkness.
© Mawata Mio— All characters, art, and worldbuilding are original works. Please do not repost without permission.
VARN — THE END
An entity born from where all timelines collapse, Varn is a massive spectral wolf composed of violet flame and bone, howling through the void of untime. His form burns with raw entropy, a creature that exists to unmake reality and usher in the cycle’s final silence.
To merge with Mio without destroying her fragile mortal form, he took on a smaller, sheep-like guise—a haunting echo of her own nature—so they could walk together in balance.
Now forever linked, Mio is his vessel, and he is her eternal guardian, both bound by fate and quiet understanding.
© Mawata Mio— All characters, art, and worldbuilding are original works. Please do not repost without permission.
More coming soon!
MawataMio - Separate Desktop & Mobile Headers // Sync active link based on hash for both headers function setActiveLinks() { const hash = window.location.hash || '#home'; const desktopLinks = document.querySelectorAll('.desktop-header a'); const mobileLinks = document.querySelectorAll('.mobile-header a'); function updateLinks(links) { links.forEach(link => { if(link.getAttribute('href') === hash) { link.classList.add('active'); } else { link.classList.remove('active'); } }); } updateLinks(desktopLinks); updateLinks(mobileLinks); } window.addEventListener('hashchange', setActiveLinks); window.addEventListener('load', setActiveLinks); More coming soon!
MawataMio - Separate Desktop & Mobile Headers // Sync active link based on hash for both headers function setActiveLinks() { const hash = window.location.hash || '#home'; const desktopLinks = document.querySelectorAll('.desktop-header a'); const mobileLinks = document.querySelectorAll('.mobile-header a'); function updateLinks(links) { links.forEach(link => { if(link.getAttribute('href') === hash) { link.classList.add('active'); } else { link.classList.remove('active'); } }); } updateLinks(desktopLinks); updateLinks(mobileLinks); } window.addEventListener('hashchange', setActiveLinks); window.addEventListener('load', setActiveLinks); 
