.outline-topic[open] > summary {
  background:
    url("./agent-circuit-pattern.svg") right center / 176px 128px,
    linear-gradient(105deg, #233baf, #25499f 50%, #126b66);
}
.outline-topic[open] > summary :is(.outline-title, .outline-count, .outline-number, .outline-toggle) {
  color: #fff;
}
.outline-topic[open] > summary .outline-number {
  background: rgb(255 255 255 / 16%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
}
.outline-topic[open] > summary:focus-visible { outline-color: #fff; }
.outline-topic .outline-points {
  background:
    url("./agent-circuit-pattern.svg") center / 176px 128px,
    radial-gradient(ellipse at 100% 0%, #dff2ed, transparent 65%),
    linear-gradient(135deg, #e6edff, #f2f6ff);
}
.outline-points li { background: rgb(255 255 255 / 94%); }
@media (min-width: 681px) {
  .outline-points:has(> li:last-child:nth-child(odd))::after {
    content: "";
    min-height: 2.5rem;
    border-radius: .7rem;
    background: url("./agent-circuit-pattern.svg") center / 176px 128px,
      linear-gradient(100deg, rgb(215 229 255 / 36%), rgb(206 237 225 / 50%));
  }
}