/* Florida Build's loading boundary, with EasyApp's monochrome wireframe compositions. */
#loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft, #f3f3f3);
  transition: opacity 180ms ease;
}
#loading[hidden], #loading.is-hidden { display: none; }
.pixel-loader {
  display: block;
  width: clamp(208px, 32vw, 280px);
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  flex: none;
}
.hl-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  #loading { transition: none; }
}

/* The wordmark uses the same renderer and choreography at an inline scale. */
a:has(> .pixel-brand-mark), a:has(> .pixel-brand-mark):hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.pixel-brand-mark {
  width: 48px;
  height: 36px;
  margin: 0;
  flex: 0 0 48px;
  pointer-events: none;
}
@media(max-width:600px) {
  .topbar .pixel-brand-mark { width:32px; height:24px; flex-basis:32px; }
}
@media(max-width:360px) {
  .topbar .pixel-brand-mark { width:20px; height:15px; flex-basis:20px; }
  .topbar a:has(> .pixel-brand-mark) { gap:4px; }
}