.pixel-arc-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pixel-arc-host > *:not(.pixel-arc) {
  position: relative;
  z-index: 1;
}

.pixel-arc {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  opacity: .55;

  --pa-center:    50;
  --pa-drop:       0;
  --pa-thickness: 55;
  --pa-falloff:  600;

  --pa-density:  200;
  --pa-dot-size:  70;
  --pa-speed:    100;
  --pa-pointer:   34;

  --pa-tint:   1;
  --pa-base:   var(--c-hellblau,  #D7E3F2);
  --pa-accent: var(--c-blau,      #0C005E);
  --pa-high:   var(--c-blau-tief, #070038);
}

.pixel-arc--on-dark {
  --pa-tint:   0;
  --pa-base:   var(--c-rot-tief, #48000F);
  --pa-accent: var(--c-rot,      #6D001A);
  --pa-high:   var(--c-rot,      #6D001A);
  opacity: .68;
  z-index: 1;
}

.pixel-arc--rot {
  --pa-base:   var(--c-hellblau, #D7E3F2);
  --pa-accent: var(--c-rot,      #6D001A);
  --pa-high:   var(--c-rot-tief, #48000F);
}

.pixel-arc--rot-tief {
  --pa-base:   var(--c-hellblau, #D7E3F2);
  --pa-accent: var(--c-rot-tief, #48000F);
  --pa-high:   var(--c-rot-tief, #48000F);
}

.pixel-arc--blau-rot {
  --pa-base:   var(--c-hellblau, #D7E3F2);
  --pa-accent: var(--c-blau,     #0C005E);
  --pa-high:   var(--c-rot,      #6D001A);
}

.pixel-arc--on-dark.pixel-arc--blau {
  --pa-base:   var(--c-blau,     #0C005E);
  --pa-accent: var(--c-hellblau, #D7E3F2);
  --pa-high:   var(--c-beige,    #FBF9F7);
}

.pixel-arc canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .pixel-arc {
    --pa-density: 82;
    --pa-thickness: 80;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-arc { --pa-pointer: 0; }
}