:root { --staging-banner-height: 32px; }
body { padding-top: var(--staging-banner-height); }
.staging-banner {
  position: fixed; inset: 0 0 auto; height: var(--staging-banner-height);
  display: flex; align-items: center; justify-content: center;
  background: #92400e; color: #fff; z-index: 2147483647;
  font: 600 12px/1.3 system-ui, sans-serif; letter-spacing: .04em;
}
#root .h-screen { height: calc(100vh - var(--staging-banner-height)); }
#root .min-h-screen { min-height: calc(100vh - var(--staging-banner-height)); }
@media print { .staging-banner { position: static; } body { padding-top: 0; } }

.staging-banner { gap: 24px; }
.staging-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.staging-banner a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 600px) {
  :root { --staging-banner-height: 48px; }
  .staging-banner { flex-wrap: wrap; align-content: center; gap: 3px 12px; padding: 3px 10px; font-size: 11px; }
}