.brand-mark{
  width:16px;height:16px;position:relative;display:inline-grid;place-items:center;flex:0 0 auto;
  color:var(--moss,var(--accent,#3a6b58));
}
.brand-mark::before,.brand-mark::after{content:"";display:block;border-radius:50%;pointer-events:none}
.brand-mark::before{width:8px;height:8px;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 9%,transparent)}
.brand-mark::after{position:absolute;inset:3px;border:1px solid currentColor;opacity:0;transform:scale(.62);animation:brand-pulse 2.8s cubic-bezier(.16,1,.3,1) infinite}
@keyframes brand-pulse{0%,48%{opacity:0;transform:scale(.62)}58%{opacity:.32}82%,100%{opacity:0;transform:scale(1.65)}}
@media(prefers-reduced-motion:reduce){.brand-mark::after{animation:none;opacity:.18;transform:scale(1)}}
@media(forced-colors:active){.brand-mark{color:CanvasText}.brand-mark::before{box-shadow:none}}