@font-face {
  font-family: 'Ma Shan Zheng';
  src: url('/fonts/ma-shan-zheng/slogan.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.admin-brand-slogan { position: relative; display: inline-block; flex-shrink: 0; padding: 2px 2px 17px; color: #214b37; }
.admin-brand-slogan > span { display: block; font-family: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', serif; font-size: 38px; font-weight: 400; font-synthesis: none; line-height: 1.35; letter-spacing: .035em; white-space: nowrap; }
.admin-brand-slogan > svg { position: absolute; bottom: 0; right: 1%; width: 95%; height: 18px; overflow: visible; color: #8fac75; pointer-events: none; }
.admin-loading-panel { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; background: var(--surface, #fff); cursor: progress; }
.admin-loading-panel--fullscreen { position: fixed; z-index: 2000; }
.admin-loading-panel .admin-brand-slogan { user-select: none; }
.app-content.is-page-loading { overflow: hidden; }
.app-content.is-page-loading > :not(.admin-loading-panel) { visibility: hidden; pointer-events: none; }
.admin-loading-panel .admin-brand-slogan > svg { animation: login-ink-in 1200ms cubic-bezier(.4, 0, .2, 1) infinite both; }

@keyframes login-ink-in { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
@media (prefers-reduced-motion: reduce) {
  .admin-loading-panel .admin-brand-slogan > svg { animation: none; }
}