/* First-paint brand shell: no JavaScript, images, or loaded fonts required. */
.brand-loading,
.brand-loading-recovery {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 40px;
  overflow: auto;
  color: #eeede8;
  background: radial-gradient(ellipse at 50% 46%, #c6f24e08, transparent 48%), #0b0e0c;
  font-family: 'Space Grotesk', 'MUNDI Chinese UI', system-ui, sans-serif;
}
.brand-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(#eeede804 1px, transparent 1px), linear-gradient(90deg, #eeede804 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 65%);
}
.brand-loading-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.brand-loading-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-bottom: 20px;
}
.brand-loading-guides {
  position: absolute;
  inset: 0;
  opacity: .65;
  background: linear-gradient(#eeede838, #eeede838) left top / 12px 1px no-repeat,
    linear-gradient(#eeede838, #eeede838) left top / 1px 12px no-repeat,
    linear-gradient(#eeede838, #eeede838) right top / 12px 1px no-repeat,
    linear-gradient(#eeede838, #eeede838) right top / 1px 12px no-repeat,
    linear-gradient(#eeede838, #eeede838) right bottom / 12px 1px no-repeat,
    linear-gradient(#eeede838, #eeede838) right bottom / 1px 12px no-repeat,
    linear-gradient(#eeede838, #eeede838) left bottom / 12px 1px no-repeat,
    linear-gradient(#eeede838, #eeede838) left bottom / 1px 12px no-repeat;
}
.brand-loading-mark {
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  box-shadow: 0 0 32px #c6f24e09;
}
.brand-loading-square,
.brand-loading-tethers {
  animation: 4s cubic-bezier(.65, 0, .25, 1) infinite;
}
.brand-loading-square { animation-name: brand-square; }
.brand-loading-tethers { animation-name: brand-tethers; }
.brand-loading .brand-loading-name {
  margin: 0;
  padding-left: .32em;
  font: 500 20px/1.2 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: .32em;
  color: #eeede8;
}
.brand-loading .brand-loading-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  color: #a1a99e;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .08em;
}
.brand-loading-status > span:last-child { margin-left: -9px; }
.brand-loading-dot {
  width: 4px;
  height: 4px;
  background: #c6f24e;
  box-shadow: 0 0 8px #c6f24e30;
}
.brand-loading-recovery { align-content: center; gap: 24px; }
.brand-loading-recovery .error-box { max-width: 480px; margin: 0; }
.brand-loading-recovery > button { justify-self: center; }
@keyframes brand-square {
  0%, 12%, 100% { transform: translate(0, 0); }
  25%, 37% { transform: translate(15.384615px, 0); }
  50%, 62% { transform: translate(15.384615px, 15.384615px); }
  75%, 87% { transform: translate(0, 15.384615px); }
}
/* Same geometry and timing as the square: the four corners remain anchored. */
@keyframes brand-tethers {
  0%, 12%, 100% { d: path('M0 0L26.612457 26.612457M100 0L57.250997 25.649402M100 100L58.002928 58.002928M0 100L25.649402 57.250997'); }
  25%, 37% { d: path('M0 0L41.997072 26.612457M100 0L72.635612 25.649402M100 100L73.387543 58.002928M0 100L41.034017 57.250997'); }
  50%, 62% { d: path('M0 0L41.997072 41.997072M100 0L72.635612 41.034017M100 100L73.387543 73.387543M0 100L41.034017 72.635612'); }
  75%, 87% { d: path('M0 0L26.612457 41.997072M100 0L57.250997 41.034017M100 100L58.002928 73.387543M0 100L25.649402 72.635612'); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-loading-square,
  .brand-loading-tethers { animation: none; }
}