/* The 3x3 Mozaico mark is the first face of the loading cube. */
.mzt-st{width:152px;height:152px}
.mzt-cube{inset:auto;left:28px;top:28px;width:96px;height:96px;transform:translateZ(-48px)}
.mzt-f{inset:0;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;padding:4px;background:#111;backface-visibility:hidden}
.mzt-f>i,.mzt-fr>i{display:block;background:var(--c);transform:none;opacity:1}
.mzt-fr{transform:translateZ(48px)}
.mzt-ri{transform:rotateY(90deg) translateZ(48px)}
.mzt-bk{transform:rotateY(180deg) translateZ(48px)}
.mzt-le{transform:rotateY(-90deg) translateZ(48px)}
.mzt-tp{transform:rotateX(90deg) translateZ(48px)}
.mzt-bt{transform:rotateX(-90deg) translateZ(48px)}
.mzt-ri,.mzt-bk,.mzt-le,.mzt-tp,.mzt-bt{opacity:0}
.mzt-logo{opacity:0;transform:scale(.72);transform-origin:center}
html[data-pt="load"] .mzt-cube,html[data-pt="fin"] .mzt-cube{animation:mztMarkCube 4.2s ease-in-out 1 both}
html[data-pt="load"] .mzt-logo,html[data-pt="fin"] .mzt-logo{animation:mztMarkLogo 4.2s ease-in-out 1 both}
html[data-pt="load"] .mzt-ri,html[data-pt="load"] .mzt-bk,html[data-pt="load"] .mzt-le,html[data-pt="load"] .mzt-tp,html[data-pt="load"] .mzt-bt{animation:mztMarkSides 4.2s ease-in-out 1 both}
html[data-pt="load"] .mzt-fr>i{animation:none}
html[data-pt="fin"] .mzt-cube{animation:none;opacity:0}
html[data-pt="fin"] .mzt-logo{animation:none;opacity:1;transform:scale(1)}
@keyframes mztMarkCube{
  0%,30%{transform:translateZ(-48px) rotateX(0deg) rotateY(0deg) scale(1);visibility:visible}
  42%{transform:translateZ(-48px) rotateX(-24deg) rotateY(-32deg) scale(1);visibility:visible}
  77%{transform:translateZ(-48px) rotateX(-24deg) rotateY(-392deg) scale(1);visibility:visible}
  83%{transform:translateZ(-48px) rotateX(0deg) rotateY(-360deg) scale(1);visibility:visible}
  93%,100%{transform:translateZ(-48px) rotateX(0deg) rotateY(-360deg) scale(.24);visibility:hidden}
}
@keyframes mztMarkSides{0%,32%{opacity:0}44%,78%{opacity:1}86%,100%{opacity:0}}
@keyframes mztMarkLogo{0%,83%{opacity:0;transform:scale(.72)}95%,100%{opacity:1;transform:scale(1)}}
/* This brief, explicitly requested brand sequence runs once in every motion mode.
   Keep opacity off the cube itself: it flattens its 3D faces in Chromium. */