/* Supplied artwork stays intact; the wordmark viewport removes only empty padding. */
html[data-theme] .brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;line-height:1;text-decoration:none}
html[data-theme] .brand .brand-symbol{display:block;width:44px;height:44px;max-width:none;flex:none;object-fit:contain}
html[data-theme] .brand .brand-wordmark{display:block;width:180px;height:34px;max-width:none;flex:none;overflow:hidden;filter:drop-shadow(0 1px .5px #41284f90)}
html[data-theme] footer .brand .brand-symbol,html[data-theme] dialog .brand .brand-symbol{width:36px;height:36px}
html[data-theme] footer .brand .brand-wordmark,html[data-theme] dialog .brand .brand-wordmark{width:150px;height:29px}
@media(max-width:840px){html[data-theme] body>header .brand{gap:6px}html[data-theme] body>header .brand .brand-symbol{width:36px;height:36px}html[data-theme] body>header .brand .brand-wordmark{width:138px;height:27px}}
@media(max-width:360px){html[data-theme] dialog .brand{gap:5px}html[data-theme] dialog .brand .brand-wordmark{width:138px;height:27px}}
/* Keep the hover target still while the supplied awake artwork gives one little hop. */
html[data-theme] .brand .brand-mascot{position:relative;display:inline-grid;flex:none;isolation:isolate;user-select:none}
html[data-theme] .brand-mascot .brand-symbol{pointer-events:none}
html[data-theme] .brand .brand-peek{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;opacity:0;transform-origin:50% 80%}
@keyframes mascot-startle{0%{transform:translateY(0) scale(1)}22%{transform:translateY(-12%) rotate(-4deg) scale(1.04)}48%{transform:translateY(0) rotate(2deg) scale(1.04,.96)}72%{transform:translateY(-3%) rotate(-1deg) scale(1)}100%{transform:translateY(0) rotate(0) scale(1)}}
@media(hover:hover) and (pointer:fine){html[data-theme] .brand-mascot:hover .brand-peek{opacity:1;animation:mascot-startle 520ms ease-out 1}html[data-theme] .brand-mascot:hover .brand-symbol{opacity:0}}
html[data-theme] .brand:focus-visible .brand-peek{opacity:1;animation:mascot-startle 520ms ease-out 1}
html[data-theme] .brand:focus-visible .brand-symbol{opacity:0}
@media(prefers-reduced-motion:reduce){html[data-theme] .brand .brand-peek{animation:none!important}}