.scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% 110%, rgba(62, 224, 200, .08), transparent 55%),
    radial-gradient(900px 500px at 80% -10%, rgba(124, 106, 247, .14), transparent 50%),
    #05060a;
}
.scene-bg[data-mode="admin"],
.scene-bg[data-mode="auth"] {
  background:
    radial-gradient(1100px 640px at 70% 120%, rgba(124, 106, 247, .16), transparent 55%),
    radial-gradient(800px 480px at 10% -20%, rgba(247, 92, 158, .1), transparent 48%),
    #07070f;
}
.scene-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
}
.scene-bg.is-ready canvas {
  opacity: 1;
}
.scene-ui {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.scene-hud {
  position: absolute;
  left: 18px;
  bottom: 52px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.scene-ui[data-mode="admin"] .scene-hud {
  left: calc(var(--sidebar-w, 252px) + 18px);
  bottom: 18px;
}
.scene-hud button {
  appearance: none;
  border: 0;
  background: rgba(8, 10, 16, .42);
  color: rgba(255, 255, 255, .82);
  font: inherit;
  font-size: 11px;
  letter-spacing: .12em;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 2px;
  cursor: pointer;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  transition: color .2s ease, background .2s ease;
}
.scene-hud button:hover,
.scene-hud button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  outline: none;
}
.scene-hud button.is-on {
  color: #3ee0c8;
}
.scene-meta {
  position: absolute;
  z-index: 2;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.45;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  pointer-events: none;
  white-space: pre-line;
}
.scene-meta-l { left: 22px; top: 50%; transform: translateY(-50%); }
.scene-meta-r { right: 22px; top: 50%; transform: translateY(-50%); text-align: right; }
.scene-explore {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.scene-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 36px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(5, 6, 10, .35);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.scene-ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: scene-ticker 42s linear infinite;
}
.scene-ticker span {
  flex: none;
  padding: 0 1.6rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 36px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}
.scene-ticker span::before {
  content: "•";
  margin-right: 1.6rem;
  color: rgba(62, 224, 200, .7);
}
@keyframes scene-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
body.scene-still .scene-ticker-track {
  animation: none;
}

html:has(body.has-scene) {
  background: #05060a;
}
body.has-scene {
  background: transparent !important;
}
body.has-scene .content-wrapper,
body.has-scene > p.m-4 {
  position: relative;
  z-index: 1;
}
body.has-scene.scene-front > p.m-4 {
  margin-bottom: 3.25rem !important;
}

@media (max-width: 991.98px) {
  .scene-meta { display: none; }
  .scene-hud {
    left: 12px;
    bottom: 44px;
  }
  .scene-ui[data-mode="admin"] .scene-hud {
    left: 12px;
  }
  .scene-hud button {
    font-size: 10px;
    padding: 7px 8px;
    letter-spacing: .08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-ticker-track { animation: none; }
}