/* Keep the engine's original splash artwork, framing its transparent margins. */
.mascot-mark {
  --mascot-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mascot-size);
  height: calc(var(--mascot-size) * .8);
  flex: none;
  overflow: hidden;
  pointer-events: none;
}
.mascot-mark img {
  display: block;
  width: 170%;
  height: auto;
  max-width: none;
  flex: none;
}
.brand.mascot-brand { display: flex; align-items: center; gap: 10px; }
.brand.mascot-brand .mascot-mark { display: inline-flex; margin-top: 0; }
.mascot-brand > div { min-width: 0; }
.workspace-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.workspace-brand .mascot-mark { --mascot-size: 38px; }
.workspace-brand > div { min-width: 0; }
.login .login-mascot { --mascot-size: 108px; display: flex; margin: 0 auto 20px; }
.crm-brand-heading { display: flex; align-items: center; gap: 14px; }
.crm-brand-heading .mascot-mark { --mascot-size: 52px; }
.gateway-mascot { --mascot-size: 120px; display: flex; margin-bottom: 24px; }
@media (min-width: 681px) and (max-width: 1000px) {
  #sidebar .mascot-brand { flex-direction: column; gap: 8px; padding-left: 0; padding-right: 0; }
}
@media (max-width: 760px) {
  .app-sidebar .brand.mascot-brand { display: none; }
  .workspace-brand { gap: 8px; }
  .workspace-brand .mascot-mark { --mascot-size: 28px; }
  .app-sidebar + main header h1 { max-width: calc(48vw - 36px); }
  .login .login-mascot { --mascot-size: 88px; margin-bottom: 16px; }
  .crm-brand-heading { gap: 10px; }
  .crm-brand-heading .mascot-mark { --mascot-size: 42px; }
}