/* Full-viewport decorative footage. The existing content remains above it. */
body { isolation: isolate; }
.site-shell > .panel {
  background: linear-gradient(145deg,rgba(16,30,42,.72),rgba(11,24,34,.66));
}
.project-media { background: rgba(12,31,47,.48); }
.project-empty-preview { background-color: rgba(12,30,45,.40); }
.background-stop {
  /* Keep the implementation available; the owner asked to hide this control. */
  display: none !important;
  position: fixed;
  right: 12px;
  bottom: 8px;
  z-index: 10;
  padding: 5px 8px;
  border: 1px solid rgba(139,174,191,.45);
  border-radius: 4px;
  background: #152632;
  color: #c9d5dd;
  font: 12px/1.4 "Inter", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.background-stop:focus-visible { outline: 2px solid #8bbdcc; outline-offset: 3px; }
.industrial-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #0d161f;
}
.industrial-background > img,
.industrial-background > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: .65;
}
.industrial-background > video { opacity: 0; }
.industrial-background[data-state="waiting"] > img,
.industrial-background[data-state="playing"] > img,
.industrial-background[data-state="paused"] > img { opacity: 0; }
.industrial-background[data-state="playing"] > video,
.industrial-background[data-state="paused"] > video { opacity: .65; }
.industrial-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(13,22,31,.12),transparent 22%,transparent 88%,rgba(13,22,31,.18));
}
@media (max-width: 820px) {
  .industrial-background > img { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .industrial-background > video { display: none; }
  .industrial-background > img { opacity: .65 !important; }
}
@media print {
  .industrial-background, .background-stop { display: none !important; }
}