.dg-typewriter.is-writing .dg-typewriter__character {
  opacity: 0;
}

.dg-typewriter.is-writing .dg-typewriter__character.is-revealed {
  opacity: 1;
}

#main-content .button,
.site-header__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --dg-neon-edge: rgb(255 255 255 / 70%);
  --dg-neon-glow: rgb(255 134 0 / 45%);
}

#main-content .button--primary,
.site-header__cta {
  --dg-neon-edge: rgb(180 162 255 / 85%);
  --dg-neon-glow: rgb(123 97 255 / 52%);
}

#main-content .button--secondary {
  --dg-neon-edge: rgb(123 97 255 / 75%);
  --dg-neon-glow: rgb(66 40 211 / 42%);
}

#main-content .button::before,
.site-header__cta::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.3;
  background-image:
    radial-gradient(circle, currentColor 0 1px, transparent 2px),
    radial-gradient(circle, currentColor 0 1px, transparent 2px),
    radial-gradient(circle, currentColor 0 1px, transparent 2px);
  background-size: 3.2rem 2.6rem, 4.4rem 3.8rem, 5.5rem 4.8rem;
  background-position: 0 0, 1.5rem 1rem, 3rem 1.5rem;
  content: "";
  pointer-events: none;
  animation: dg-button-particles 12s linear infinite;
}

#main-content .button:hover::before,
#main-content .button:focus-visible::before,
.site-header__cta:hover::before,
.site-header__cta:focus-visible::before {
  opacity: 0.62;
  animation-duration: 4s;
}

#main-content .button::after,
.site-header__cta::after {
  position: absolute;
  inset: 2px;
  border: 1px solid var(--dg-neon-edge);
  border-radius: inherit;
  box-shadow: inset 0 0 0.35rem var(--dg-neon-glow), inset 0 0 0.8rem var(--dg-neon-glow);
  content: "";
  pointer-events: none;
  animation: dg-button-neon 3.6s ease-in-out infinite;
}

#main-content .button:hover::after,
#main-content .button:focus-visible::after,
.site-header__cta:hover::after,
.site-header__cta:focus-visible::after {
  animation-duration: 1.6s;
}

@keyframes dg-button-particles {
  to { background-position: 3.2rem -2.6rem, -2.9rem 4.8rem, 8.5rem -3.3rem; }
}

@keyframes dg-button-neon {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 1; }
}

.diagnostic-section {
  --dg-diagnostic-accent: var(--dg-color-orange);
  background:
    radial-gradient(circle at 82% 18%, rgb(0 180 166 / 20%), transparent 25rem),
    radial-gradient(circle at 8% 85%, rgb(123 97 255 / 26%), transparent 30rem),
    linear-gradient(145deg, var(--dg-color-deep), var(--dg-color-navy));
}

.diagnostic-section[data-diagnostic-state="02"] { --dg-diagnostic-accent: var(--dg-color-blue); }
.diagnostic-section[data-diagnostic-state="03"] { --dg-diagnostic-accent: var(--dg-color-pink); }
.diagnostic-section[data-diagnostic-state="04"] { --dg-diagnostic-accent: var(--dg-color-violet); }

.diagnostic-scenario__button::before,
.diagnostic-scenario.is-active .diagnostic-scenario__number,
.diagnostic-capabilities li.is-related > span { background: var(--dg-diagnostic-accent); }

.diagnostic-scenario.is-active .diagnostic-scenario__number,
.diagnostic-capabilities li.is-related > span { border-color: var(--dg-diagnostic-accent); }

.diagnostic-route__segment { stroke: var(--dg-diagnostic-accent); }
.diagnostic-route__segment circle,
.diagnostic-route__stage.is-active > circle:first-child { fill: var(--dg-diagnostic-accent); }
.diagnostic-route__stage.is-active > circle:first-child { stroke: var(--dg-diagnostic-accent); }
.diagnostic-response { border-inline-start-color: var(--dg-diagnostic-accent); }
.diagnostic-scenario__state,
.diagnostic-route__center small { color: var(--dg-diagnostic-accent); }

.diagnostic-capabilities li[data-diagnostic-capability="analytics"].is-related > span {
  background: var(--dg-color-teal);
  border-color: var(--dg-color-teal);
  box-shadow: 0 0 0 0.25rem rgb(0 180 166 / 15%);
}

@media (prefers-reduced-motion: reduce) {
  .dg-typewriter__character { opacity: 1 !important; }
  #main-content .button::before,
  #main-content .button::after,
  .site-header__cta::before,
  .site-header__cta::after { animation: none; }
}