/* Shared pixel logo stage for sign-in and home. */
.brand-art {
  --brand-grid: #85e0b028;
  --brand-reticle: #85e0b04d;
  position: relative;
  display: grid;
  place-items: center;
  width: 256px;
  height: 232px;
  margin: 0 auto 36px;
  isolation: isolate;
}

.brand-art-grid {
  position: absolute;
  inset: -16px -32px;
  z-index: -1;
  background-image: radial-gradient(circle, var(--brand-grid) 0.7px, transparent 0.9px);
  background-size: 12px 12px;
  mask-image: radial-gradient(ellipse at center, #000 12%, transparent 68%);
}

.brand-art-reticle {
  position: absolute;
  inset: 20px 32px;
  background:
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) left top / 8px 1px,
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) left top / 1px 8px,
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) right top / 8px 1px,
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) right top / 1px 8px,
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) left bottom / 8px 1px,
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) left bottom / 1px 8px,
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) right bottom / 8px 1px,
    linear-gradient(var(--brand-reticle), var(--brand-reticle)) right bottom / 1px 8px;
  background-repeat: no-repeat;
}

.brand-art-logo {
  display: block;
  width: 256px;
  height: 256px;
  position: absolute;
  color: #c4f5da;
  image-rendering: pixelated;
}

.brand-art-logo[hidden] { display: none; }
.brand-art-fallback { display: block; width: 76px; height: 160px; }
.brand-art-logo[data-ready] + .brand-art-fallback { visibility: hidden; }

@media (max-width: 400px), (max-height: 680px) {
  .brand-art { width: 224px; height: 200px; margin-bottom: 24px; }
  .brand-art-logo { width: 224px; height: 224px; }
  .brand-art-reticle { inset: 16px 28px; }
}