/* Brand artwork stays the same size; only the two profile cards move. */
#app .drawer-layout .navrow .brand .brand-logo{display:block;flex:none;width:min(48vw,185px);height:44px;overflow:visible}
.brand-card-back,.brand-card-front{transform-box:fill-box;transform-origin:center}
.brand-card-back{animation:brand-back-idle 16s ease-in-out infinite}
.brand-card-front{animation:brand-front-idle 16s ease-in-out infinite}
.brand:is(:hover,:focus-visible) .brand-card-back{animation:brand-back-greet .85s cubic-bezier(.2,.7,.2,1) both}
.brand:is(:hover,:focus-visible) .brand-card-front{animation:brand-front-greet .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes brand-back-idle{0%,90%,100%{transform:translate(0,0) rotate(0)}93%{transform:translate(4px,-1px) rotate(5deg)}96%{transform:translate(-2px,0) rotate(-3deg)}}
@keyframes brand-front-idle{0%,90%,100%{transform:translate(0,0) rotate(0)}93%{transform:translate(-3px,1px) rotate(-4deg)}96%{transform:translate(2px,0) rotate(2deg)}}
@keyframes brand-back-greet{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(5px,-1px) rotate(6deg)}70%{transform:translate(-2px,0) rotate(-3deg)}}
@keyframes brand-front-greet{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(-3px,1px) rotate(-5deg)}70%{transform:translate(2px,0) rotate(2deg)}}
@media(max-width:520px){#app .drawer-layout .navrow .brand .brand-logo{width:min(45vw,165px);height:40px}}
@media(max-width:360px){#app .drawer-layout .navrow .brand .brand-logo{width:132px}}
@media(prefers-reduced-motion:reduce){.brand-card-back,.brand-card-front,.brand:is(:hover,:focus-visible) .brand-card-back,.brand:is(:hover,:focus-visible) .brand-card-front{animation:none;transform:none}}