/* Required component styles. Give the host a nonzero height. */
[data-liquid-logo] { position:relative; height:500px; isolation:isolate; }
[data-liquid-logo] img, [data-liquid-logo] canvas { position:absolute; pointer-events:none; }
[data-liquid-logo] canvas { inset:0; width:100%; height:100%; opacity:0; }
[data-liquid-logo][data-ready="true"] canvas { opacity:1; }
[data-liquid-logo][data-ready="true"] img { opacity:0; }

/* Site integration: reserve interaction space around the intact logo. */
.ms-site .pj-liquid-mark{display:block;width:58px;height:58px;flex:0 0 58px;overflow:visible;line-height:0}
.ms-site .pj-liquid-mark img{max-width:none;opacity:1;object-fit:contain}
.ms-site .pj-liquid-mark[data-ready="true"] img{opacity:0}
.ms-site .pj-liquid-mark canvas{max-width:none}
.ms-site .ms-brand{gap:5px}
.ms-site .ms-footer .pj-liquid-mark{filter:brightness(0) invert(1)}
.ms-site .ms-founder-top .pj-liquid-mark{width:180px;height:180px;flex-basis:180px}
@media(max-width:600px){.ms-site .pj-liquid-mark{width:52px;height:52px;flex-basis:52px}.ms-site .ms-founder-top .pj-liquid-mark{width:150px;height:150px;flex-basis:150px}}

/* Let liquid disperse beyond the mark without exposing a hard canvas edge. */
.ms-site .pj-liquid-mark canvas{
  mask-image:radial-gradient(ellipse at center,#000 65%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 65%,transparent 100%);
}