.brand-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, #e2ebe0 0%, #edf1eb 42%, #edf1eb 75%);
  color: #293b35;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  transition: opacity 240ms ease, visibility 240ms ease;
  overscroll-behavior: contain;
  touch-action: none;
}
.preloader-exiting { opacity: 0; visibility: hidden; }
.preloader-content { width: min(100%, 380px); text-align: center; }
.preloader-mark { display: flex; justify-content: center; align-items: center; gap: 7px; height: 76px; margin-bottom: 26px; }
.preloader-mark > span { width: 13px; height: 36px; border-radius: 6px; background: linear-gradient(180deg, #79a293, #46796a); box-shadow: 0 0 22px #35756820; animation: preloader-bars 1.3s ease-in-out infinite; }
.preloader-mark > span:nth-child(2) { height: 60px; animation-delay: .15s; }
.preloader-mark > span:nth-child(3) { height: 46px; animation-delay: .3s; }
.preloader-mark > span:nth-child(4) { height: 30px; animation-delay: .45s; background: linear-gradient(180deg, #8aaa92, #5e8570); }
.preloader-brand { font-size: clamp(32px, 7vw, 44px); font-weight: 600; letter-spacing: -.045em; line-height: 1.2; }
.preloader-brand > span { display: inline-block; vertical-align: middle; margin-left: 5px; border: 1px solid #35756855; border-radius: 8px; padding: 6px 9px; font-size: 15px; letter-spacing: .08em; color: #31695e; background: #3575680d; }
.preloader-caption { min-height: 28px; margin: 18px 0 20px; color: #354c41; font-size: 16px; font-weight: 500; line-height: 1.6; }
.preloader-track { height: 6px; width: min(100%, 280px); overflow: hidden; border-radius: 4px; background: #35756815; margin: 0 auto; }
.preloader-detail { margin: 16px 0 0; color: #5d6b65; font-size: 12px; line-height: 1.6; }
.preloader-track > span { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #357568, #3e806d); animation: preloader-sweep 1.5s ease-in-out infinite; }
.preloader-credit { margin: 38px 0 0; font-size: 11px; letter-spacing: .04em; color: #5d6b65; }
.preloader-credit strong { color: #354c41; font-weight: 500; margin-left: 3px; }
@keyframes preloader-bars { 0%, 100% { transform: scaleY(.75); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes preloader-sweep { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
@media (prefers-reduced-motion: reduce) {
  .brand-preloader { transition: none; }
  .preloader-mark > span, .preloader-track > span { animation: none; }
  .preloader-track > span { width: 100%; opacity: .6; }
}