/* Dark interactive background styles */
:root{
  --bg-dark: #05030a;
  --bg-mid: #0d0b14;
  --accent: rgba(255,130,200,0.06);
}
html,body{height:100%;}
#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  pointer-events:none; /* allow clicks through the canvas */
}
/* use pure black and ensure page content sits above the canvas */
:root{ --black: #000000 }
body{
  background: var(--black);
  color: #fff;
}
/* make page children stack above the background canvas */
body > *{position:relative; z-index:2;}
/* if any legacy `.line` elements remain, keep them behind content */
body > .line{z-index:0; pointer-events:none}
/* subtle gradient behind the canvas for depth */
body{
  background: radial-gradient(1200px 600px at 10% 20%, #0b0520 0%, transparent 25%),
              radial-gradient(900px 400px at 90% 80%, rgba(50,10,40,0.35) 0%, transparent 20%),
              var(--bg-dark);
}
/* small performance tweak for reduced motion preference */
@media (prefers-reduced-motion: reduce){
  #bg-canvas{opacity:0.9}
}