/* The selected Blade S is the exact transparent PNG, with its proportions intact. */
.blade-brand-mark{display:block;flex:none;object-fit:contain;object-position:center;max-width:none;background:transparent;filter:drop-shadow(0 0 8px #8699ff24)}
body.dark-theme .site-header .brand-icon{width:44px;height:44px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header .brand-icon>.blade-brand-mark{width:40px;height:40px}
.site-footer .footer-wordmark{gap:10px;line-height:1.1}
.site-footer .footer-wordmark>.blade-brand-mark{width:38px;height:38px}
.workspace-brand>.blade-brand-mark{width:24px;height:24px}

/* Only the image moves, so the tested closing-panel center stays fixed. */
body.dark-theme .blade-logo-emblem{aspect-ratio:1;filter:drop-shadow(0 8px 18px #090c2199)}
body.dark-theme .blade-logo-emblem>.emblem-poster{opacity:1;object-fit:contain;object-position:center;animation:blade-hover 7s ease-in-out infinite;animation-delay:var(--blade-delay,0s)}
.blade-logo-emblem.hero-smile{--blade-delay:-1.7s}
.blade-logo-emblem.hero-wallet{--blade-delay:-3.4s}
.blade-logo-emblem.hero-coin{--blade-delay:-5.1s}
.closing-section>.blade-logo-emblem{--blade-delay:-2.4s}
@keyframes blade-hover{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
@media(max-width:760px){body.dark-theme .site-header .brand-icon{width:40px;height:40px}.site-header .brand-icon>.blade-brand-mark{width:38px;height:38px}.site-footer .footer-wordmark>.blade-brand-mark{width:34px;height:34px}.workspace-brand>.blade-brand-mark{width:22px;height:22px}}
/* Separate the three desktop marks around the wordmark without crowding the nav. */
@media(min-width:761px){
 body.dark-theme .wordmark-scene>.hero-brand-emblem.hero-wallet{left:0;right:auto;top:auto;bottom:-22%;width:10%!important}
 body.dark-theme .wordmark-scene>.hero-brand-emblem.hero-coin{left:auto;right:-1%;top:auto;bottom:-8%;width:12%!important;transform:rotate(10deg)}
}
/* All three distinct hero marks share the existing gap above the mobile title. */
@media(max-width:760px){
 body.dark-theme .wordmark-scene>.hero-brand-emblem{display:block;top:-52px;bottom:auto;right:auto;width:44px!important;height:44px;aspect-ratio:1;transform:translateX(-50%)}
 body.dark-theme .wordmark-scene>.hero-brand-emblem.hero-rocket{left:calc(50% - 84px)}
 body.dark-theme .wordmark-scene>.hero-brand-emblem.hero-wallet{left:50%}
 body.dark-theme .wordmark-scene>.hero-brand-emblem.hero-coin{left:calc(50% + 84px)}
}