.logo-portrait { position: relative; display: block; width: 100%; line-height: 0; }
.logo-portrait > img { display: block; width: 100% !important; max-width: none !important; height: auto; margin: 0 !important; animation: none !important; }
.logo-portrait-ready > img { opacity: 0; }
.logo-character-art { position: absolute; display: block; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero-logo .logo-portrait { max-width: 340px; margin-inline: auto; }
.search-page header a:has(.logo-portrait) { display: block; width: 170px; flex-shrink: 0; }
@media(max-width:700px) { .search-page header a:has(.logo-portrait) { width: 130px; } }
@media(max-width:760px) { .hero-logo .logo-portrait { max-width: 330px; } }
@media(max-width:480px) { .hero-logo .logo-portrait { max-width: 280px; } }
@media(forced-colors:active) { .logo-portrait-ready > img { opacity: 1; }.logo-character-art { display: none; } }