a .brand365-mark {
  display:inline-block;
  position:relative;
  width:54px;
  height:auto;
  aspect-ratio:217 / 182;
  vertical-align:middle;
  margin:0;
}
.brand365-mark::before,.brand365-mark::after {
  content:"";
  position:absolute;
  inset:0;
  background-color:currentColor;
  -webkit-mask:url("logo.svg") center / contain no-repeat;
  mask:url("logo.svg") center / contain no-repeat;
}
.brand365-mark::before {
  background:linear-gradient(110deg,currentColor,transparent 85%);
  -webkit-mask-image:url("moon.svg");
  mask-image:url("moon.svg");
  opacity:0;
  transition:opacity .2s ease-out;
}
a:focus-visible .brand365-mark::before {opacity:.35}
@media (hover:hover) {a:hover .brand365-mark::before {opacity:.35}}
@media (prefers-reduced-motion:reduce) {.brand365-mark::before {transition:none}}
@media (forced-colors:active) {.brand365-mark {color:LinkText;forced-color-adjust:none}}