/* Design-system background (Canvas-like)
   - dark base + subtle grid
   - masked/vignette so the grid "dies" at edges
   Keep it lightweight and app-safe (no third-party runtime). */
  .ds-bg {
    position: fixed;
    inset: 0;
    /* Below UnicornStudio (-z-10) so lights blend through grid/vignette; body supplies base color */
    z-index: -12;
    pointer-events: none;
    overflow: hidden;
  }
  
  .ds-bg__grid {
    position: absolute;
    inset: -10%;
    opacity: 1;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%);
  }
  
  /* Subtle vignette + depth (keeps center readable) */
  .ds-bg__vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(900px 420px at 50% 15%, rgba(255,255,255,0.05), transparent 55%),
      radial-gradient(1200px 800px at 50% 50%, transparent 0%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.92) 100%);
    opacity: 0.85;
  }
  
  /* Optional: tiny film grain feel (very subtle) */
  .ds-bg__noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
  }
  
  /* Make sure body background stays consistent even without the layer */
  body.ds-bg-enabled {
    background: #050505;
  }