/* A masked highlight paints only the perimeter; content and hit targets stay unchanged. */
main#main .eu-edge-card {
  --eu-edge-color: 0, 104, 255;
  --eu-edge-opacity: 1;
  --eu-edge-x: 50%;
  --eu-edge-y: 50%;
  --eu-edge-spread: 280px;
  position: relative;
}

html[data-theme="dark"] main#main .eu-edge-card {
  --eu-edge-color: 104, 167, 255;
  --eu-edge-opacity: 1;
}

main#main .eu-os-grid > .eu-os-node:nth-child(6).eu-edge-card {
  --eu-edge-color: 39, 199, 111;
}
html[data-theme="dark"] main#main .eu-os-grid > .eu-os-node:nth-child(6).eu-edge-card {
  --eu-edge-color: 119, 255, 170;
}
main#main .eu-os-grid > .eu-os-node:last-child.eu-edge-card {
  --eu-edge-accent: 39, 199, 111;
}
html[data-theme="dark"] main#main .eu-os-grid > .eu-os-node:last-child.eu-edge-card {
  --eu-edge-accent: 66, 217, 141;
}

main#main .eu-edge-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(
    circle var(--eu-edge-spread) at var(--eu-edge-x) var(--eu-edge-y),
    rgba(var(--eu-edge-color), 1) 0%,
    rgba(var(--eu-edge-color), .95) 36%,
    rgba(var(--eu-edge-color), .55) 65%,
    rgba(var(--eu-edge-color), 0) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .24s ease;
  pointer-events: none;
  z-index: 3;
}

main#main .price-card.eu-edge-card::before { inset: -2px; padding: 3px; }
main#main .eu-os-grid > .eu-os-node:nth-child(6).eu-edge-card::before { padding: 3px; }
main#main .eu-os-grid > .eu-os-node:last-child.eu-edge-card::before {
  background: radial-gradient(
    circle var(--eu-edge-spread) at var(--eu-edge-x) var(--eu-edge-y),
    rgba(var(--eu-edge-color), 1) 0%,
    rgba(var(--eu-edge-accent), .95) 36%,
    rgba(var(--eu-edge-accent), .55) 65%,
    rgba(var(--eu-edge-accent), 0) 100%
  );
}
main#main .eu-edge-card:focus-within:not(.is-edge-active)::before {
  background: rgba(var(--eu-edge-color), .65);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  main#main .eu-edge-card.is-edge-active::before { opacity: var(--eu-edge-opacity); }
}

@media (prefers-reduced-motion: reduce) {
  main#main .eu-edge-card::before { transition: none; }
  main#main .eu-edge-card.is-edge-active::before { opacity: 0; }
  main#main .eu-edge-card:focus-within::before { opacity: 1; }
}

.motion-off main#main .eu-edge-card::before { transition: none; }
.motion-off main#main .eu-edge-card.is-edge-active::before { opacity: 0; }
.motion-off main#main .eu-edge-card:focus-within::before { opacity: 1; }

@media (forced-colors: active) {
  main#main .eu-edge-card::before { display: none; }
}

@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  main#main .eu-edge-card::before { display: none; }
}