/* Hosted-preview overlay only. Do not copy into the working tree. */
.demo-preview {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}

.demo-preview__grid {
  position: absolute;
  inset: -45%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  gap: 72px 96px;
  transform: rotate(-26deg);
  color: #0a4f8c;
  opacity: 0.075;
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  user-select: none;
}

html[data-theme="dark"] .demo-preview__grid {
  color: #7ec8f0;
  opacity: 0.09;
}

.demo-preview__grid span {
  white-space: nowrap;
}

.demo-preview__chip {
  position: fixed;
  left: 20px;
  top: calc(var(--header-h) + 12px);
  bottom: auto;
  z-index: 95;
  pointer-events: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4f7fb;
  background: #181e2a;
  border: 1px solid #1a8ad4;
  padding: 8px 12px;
  box-shadow: 0 10px 24px rgba(24, 30, 42, 0.28);
  user-select: none;
}

html[data-theme="dark"] .demo-preview__chip {
  background: #0c121c;
  color: #e8eef5;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .demo-preview__grid { transform: none; inset: 0; opacity: 0.05; }
}