.material-visual,
.article-art,
.choice-visual,
.related-visual {
  --visual-color: currentColor;
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

.material-visual i,
.article-art i,
.choice-visual i,
.related-visual i {
  position: absolute;
  display: block;
  border-color: var(--visual-color);
  background: color-mix(in srgb, var(--visual-color) 12%, transparent);
}

.material-visual--mail i:first-child,
.article-art--mail i:first-child,
.choice-visual--mail i:first-child,
.related-visual--mail i:first-child { inset: 25% 12% 20%; border: 2px solid var(--visual-color); border-radius: 8px; }
.material-visual--mail i:nth-child(2),.article-art--mail i:nth-child(2),.choice-visual--mail i:nth-child(2),.related-visual--mail i:nth-child(2) { left: 14%; top: 28%; width: 43%; height: 2px; transform: rotate(29deg); transform-origin: left; background: var(--visual-color); }
.material-visual--mail i:nth-child(3),.article-art--mail i:nth-child(3),.choice-visual--mail i:nth-child(3),.related-visual--mail i:nth-child(3) { right: 14%; top: 28%; width: 43%; height: 2px; transform: rotate(-29deg); transform-origin: right; background: var(--visual-color); }
.material-visual--mail i:nth-child(4),.article-art--mail i:nth-child(4),.choice-visual--mail i:nth-child(4),.related-visual--mail i:nth-child(4) { top: 8%; right: 5%; width: 22%; height: 22%; border-radius: 50%; background: var(--visual-color); animation: visualPing 2.8s ease-in-out infinite; }

.material-visual--ai i,.article-art--ai i,.choice-visual--ai i,.related-visual--ai i { width: 20%; aspect-ratio: 1; border: 2px solid var(--visual-color); border-radius: 4px; animation: visualFloat 5s ease-in-out infinite; }
.material-visual--ai i:nth-child(1),.article-art--ai i:nth-child(1),.choice-visual--ai i:nth-child(1),.related-visual--ai i:nth-child(1) { left: 12%; top: 13%; }
.material-visual--ai i:nth-child(2),.article-art--ai i:nth-child(2),.choice-visual--ai i:nth-child(2),.related-visual--ai i:nth-child(2) { left: 42%; top: 34%; animation-delay: -.8s; }
.material-visual--ai i:nth-child(3),.article-art--ai i:nth-child(3),.choice-visual--ai i:nth-child(3),.related-visual--ai i:nth-child(3) { right: 9%; top: 12%; animation-delay: -1.6s; }
.material-visual--ai i:nth-child(4),.article-art--ai i:nth-child(4),.choice-visual--ai i:nth-child(4),.related-visual--ai i:nth-child(4) { left: 18%; bottom: 7%; animation-delay: -2.4s; }
.material-visual--ai i:nth-child(5),.article-art--ai i:nth-child(5),.choice-visual--ai i:nth-child(5),.related-visual--ai i:nth-child(5) { right: 14%; bottom: 13%; animation-delay: -3.2s; }

.material-visual--motion i,.article-art--motion i,.choice-visual--motion i,.related-visual--motion i { left: 8%; right: 8%; height: 2px; background: var(--visual-color); transform-origin: center; animation: visualWave 3.6s ease-in-out infinite; }
.material-visual--motion i:nth-child(1),.article-art--motion i:nth-child(1),.choice-visual--motion i:nth-child(1),.related-visual--motion i:nth-child(1) { top: 18%; }
.material-visual--motion i:nth-child(2),.article-art--motion i:nth-child(2),.choice-visual--motion i:nth-child(2),.related-visual--motion i:nth-child(2) { top: 32%; animation-delay: -.4s; }
.material-visual--motion i:nth-child(3),.article-art--motion i:nth-child(3),.choice-visual--motion i:nth-child(3),.related-visual--motion i:nth-child(3) { top: 48%; animation-delay: -.8s; }
.material-visual--motion i:nth-child(4),.article-art--motion i:nth-child(4),.choice-visual--motion i:nth-child(4),.related-visual--motion i:nth-child(4) { top: 64%; animation-delay: -1.2s; }
.material-visual--motion i:nth-child(5),.article-art--motion i:nth-child(5),.choice-visual--motion i:nth-child(5),.related-visual--motion i:nth-child(5) { top: 80%; animation-delay: -1.6s; }

.material-visual--split i,.article-art--split i,.choice-visual--split i,.related-visual--split i { top: 13%; bottom: 13%; width: 34%; border: 2px solid var(--visual-color); }
.material-visual--split i:nth-child(1),.article-art--split i:nth-child(1),.choice-visual--split i:nth-child(1),.related-visual--split i:nth-child(1) { left: 10%; border-radius: 50% 8px 8px 50%; }
.material-visual--split i:nth-child(2),.article-art--split i:nth-child(2),.choice-visual--split i:nth-child(2),.related-visual--split i:nth-child(2) { right: 10%; border-radius: 8px 50% 50% 8px; animation: visualPulse 4s ease-in-out infinite; }
.material-visual--split i:nth-child(3),.article-art--split i:nth-child(3),.choice-visual--split i:nth-child(3),.related-visual--split i:nth-child(3) { left: 50%; top: 8%; bottom: 8%; width: 2px; background: var(--visual-color); }

.material-visual--tree i,.article-art--tree i,.choice-visual--tree i,.related-visual--tree i { width: 16%; aspect-ratio: 1; border: 2px solid var(--visual-color); border-radius: 50%; background: color-mix(in srgb, var(--visual-color) 18%, transparent); animation: visualPulse 4.2s ease-in-out infinite; }
.material-visual--tree i:nth-child(1),.article-art--tree i:nth-child(1),.choice-visual--tree i:nth-child(1),.related-visual--tree i:nth-child(1) { left: 42%; top: 7%; }
.material-visual--tree i:nth-child(2),.article-art--tree i:nth-child(2),.choice-visual--tree i:nth-child(2),.related-visual--tree i:nth-child(2) { left: 12%; bottom: 10%; animation-delay: -.8s; }
.material-visual--tree i:nth-child(3),.article-art--tree i:nth-child(3),.choice-visual--tree i:nth-child(3),.related-visual--tree i:nth-child(3) { left: 42%; bottom: 10%; animation-delay: -1.6s; }
.material-visual--tree i:nth-child(4),.article-art--tree i:nth-child(4),.choice-visual--tree i:nth-child(4),.related-visual--tree i:nth-child(4) { right: 12%; bottom: 10%; animation-delay: -2.4s; }
.material-visual--tree i:nth-child(5),.article-art--tree i:nth-child(5),.choice-visual--tree i:nth-child(5),.related-visual--tree i:nth-child(5) { left: 20%; right: 20%; top: 50%; height: 2px; background: var(--visual-color); }

.material-visual--code i,.article-art--code i,.choice-visual--code i,.related-visual--code i { left: 10%; height: 8%; border-radius: 999px; background: var(--visual-color); animation: visualCode 3.8s ease-in-out infinite alternate; }
.material-visual--code i:nth-child(1),.article-art--code i:nth-child(1),.choice-visual--code i:nth-child(1),.related-visual--code i:nth-child(1) { top: 15%; width: 72%; }
.material-visual--code i:nth-child(2),.article-art--code i:nth-child(2),.choice-visual--code i:nth-child(2),.related-visual--code i:nth-child(2) { top: 31%; width: 47%; animation-delay: -.5s; }
.material-visual--code i:nth-child(3),.article-art--code i:nth-child(3),.choice-visual--code i:nth-child(3),.related-visual--code i:nth-child(3) { top: 47%; width: 66%; animation-delay: -1s; }
.material-visual--code i:nth-child(4),.article-art--code i:nth-child(4),.choice-visual--code i:nth-child(4),.related-visual--code i:nth-child(4) { top: 63%; width: 37%; animation-delay: -1.5s; }
.material-visual--code i:nth-child(5),.article-art--code i:nth-child(5),.choice-visual--code i:nth-child(5),.related-visual--code i:nth-child(5) { top: 79%; width: 57%; animation-delay: -2s; }

.material-visual--gauge i,.article-art--gauge i,.choice-visual--gauge i,.related-visual--gauge i { inset: 10%; border: 3px solid var(--visual-color); border-radius: 50%; border-top-color: transparent; animation: visualSpin 8s linear infinite; }
.material-visual--gauge i:nth-child(2),.article-art--gauge i:nth-child(2),.choice-visual--gauge i:nth-child(2),.related-visual--gauge i:nth-child(2) { inset: 24%; animation-direction: reverse; animation-duration: 6s; }
.material-visual--gauge i:nth-child(3),.article-art--gauge i:nth-child(3),.choice-visual--gauge i:nth-child(3),.related-visual--gauge i:nth-child(3) { inset: 39%; border-color: var(--visual-color); background: var(--visual-color); animation: visualPulse 2.8s ease-in-out infinite; }

.material-visual--events i,.article-art--events i,.choice-visual--events i,.related-visual--events i { width: 13%; aspect-ratio: 1; border: 2px solid var(--visual-color); border-radius: 50%; background: var(--visual-color); animation: visualPing 3s ease-in-out infinite; }
.material-visual--events i:nth-child(1),.article-art--events i:nth-child(1),.choice-visual--events i:nth-child(1),.related-visual--events i:nth-child(1) { left: 8%; bottom: 16%; }
.material-visual--events i:nth-child(2),.article-art--events i:nth-child(2),.choice-visual--events i:nth-child(2),.related-visual--events i:nth-child(2) { left: 43%; top: 42%; animation-delay: -1s; }
.material-visual--events i:nth-child(3),.article-art--events i:nth-child(3),.choice-visual--events i:nth-child(3),.related-visual--events i:nth-child(3) { right: 8%; top: 13%; animation-delay: -2s; }
.material-visual--events i:nth-child(4),.article-art--events i:nth-child(4),.choice-visual--events i:nth-child(4),.related-visual--events i:nth-child(4) { left: 15%; right: 15%; top: 50%; height: 2px; background: var(--visual-color); transform: rotate(-25deg); }

.material-visual--languages i,.article-art--languages i,.choice-visual--languages i,.related-visual--languages i { inset: 11%; border: 2px solid var(--visual-color); border-radius: 50%; animation: visualSpin 12s linear infinite; }
.material-visual--languages i:nth-child(2),.article-art--languages i:nth-child(2),.choice-visual--languages i:nth-child(2),.related-visual--languages i:nth-child(2) { inset: 11% 36%; border-radius: 50%; animation-duration: 8s; }
.material-visual--languages i:nth-child(3),.article-art--languages i:nth-child(3),.choice-visual--languages i:nth-child(3),.related-visual--languages i:nth-child(3) { inset: 36% 11%; border-radius: 50%; animation-direction: reverse; }
.material-visual--languages i:nth-child(4),.article-art--languages i:nth-child(4),.choice-visual--languages i:nth-child(4),.related-visual--languages i:nth-child(4) { inset: 44%; border: 0; background: var(--visual-color); }

.material-visual--migration i,.article-art--migration i,.choice-visual--migration i,.related-visual--migration i { top: 26%; width: 28%; height: 48%; border: 2px solid var(--visual-color); border-radius: 8px; }
.material-visual--migration i:nth-child(1),.article-art--migration i:nth-child(1),.choice-visual--migration i:nth-child(1),.related-visual--migration i:nth-child(1) { left: 7%; }
.material-visual--migration i:nth-child(2),.article-art--migration i:nth-child(2),.choice-visual--migration i:nth-child(2),.related-visual--migration i:nth-child(2) { right: 7%; animation: visualPulse 3.8s ease-in-out infinite; }
.material-visual--migration i:nth-child(3),.article-art--migration i:nth-child(3),.choice-visual--migration i:nth-child(3),.related-visual--migration i:nth-child(3) { left: 38%; top: 49%; width: 24%; height: 3px; background: var(--visual-color); animation: visualSlide 2.4s ease-in-out infinite; }

.material-visual--timeline i,.article-art--timeline i,.choice-visual--timeline i,.related-visual--timeline i { top: 46%; width: 13%; aspect-ratio: 1; border: 2px solid var(--visual-color); border-radius: 50%; background: var(--visual-color); animation: visualPing 4s ease-in-out infinite; }
.material-visual--timeline i:nth-child(1),.article-art--timeline i:nth-child(1),.choice-visual--timeline i:nth-child(1),.related-visual--timeline i:nth-child(1) { left: 5%; }
.material-visual--timeline i:nth-child(2),.article-art--timeline i:nth-child(2),.choice-visual--timeline i:nth-child(2),.related-visual--timeline i:nth-child(2) { left: 30%; animation-delay: -1s; }
.material-visual--timeline i:nth-child(3),.article-art--timeline i:nth-child(3),.choice-visual--timeline i:nth-child(3),.related-visual--timeline i:nth-child(3) { left: 56%; animation-delay: -2s; }
.material-visual--timeline i:nth-child(4),.article-art--timeline i:nth-child(4),.choice-visual--timeline i:nth-child(4),.related-visual--timeline i:nth-child(4) { right: 5%; animation-delay: -3s; }
.material-visual--timeline i:nth-child(5),.article-art--timeline i:nth-child(5),.choice-visual--timeline i:nth-child(5),.related-visual--timeline i:nth-child(5) { left: 10%; right: 10%; top: 52%; height: 2px; background: var(--visual-color); }

.material-visual--rubricator i,.article-art--rubricator i,.choice-visual--rubricator i,.related-visual--rubricator i { height: 18%; border: 2px solid var(--visual-color); border-radius: 999px; animation: visualFloat 4s ease-in-out infinite; }
.material-visual--rubricator i:nth-child(1),.article-art--rubricator i:nth-child(1),.choice-visual--rubricator i:nth-child(1),.related-visual--rubricator i:nth-child(1) { left: 8%; top: 12%; width: 45%; }
.material-visual--rubricator i:nth-child(2),.article-art--rubricator i:nth-child(2),.choice-visual--rubricator i:nth-child(2),.related-visual--rubricator i:nth-child(2) { right: 8%; top: 37%; width: 58%; animation-delay: -1s; }
.material-visual--rubricator i:nth-child(3),.article-art--rubricator i:nth-child(3),.choice-visual--rubricator i:nth-child(3),.related-visual--rubricator i:nth-child(3) { left: 12%; bottom: 10%; width: 68%; animation-delay: -2s; }

.material-visual--engagement i,.article-art--engagement i,.choice-visual--engagement i,.related-visual--engagement i { bottom: 12%; width: 10%; border-radius: 999px 999px 2px 2px; background: var(--visual-color); transform-origin: bottom; animation: visualBars 3.2s ease-in-out infinite; }
.material-visual--engagement i:nth-child(1),.article-art--engagement i:nth-child(1),.choice-visual--engagement i:nth-child(1),.related-visual--engagement i:nth-child(1) { left: 9%; height: 24%; }
.material-visual--engagement i:nth-child(2),.article-art--engagement i:nth-child(2),.choice-visual--engagement i:nth-child(2),.related-visual--engagement i:nth-child(2) { left: 25%; height: 52%; animation-delay: -.5s; }
.material-visual--engagement i:nth-child(3),.article-art--engagement i:nth-child(3),.choice-visual--engagement i:nth-child(3),.related-visual--engagement i:nth-child(3) { left: 41%; height: 72%; animation-delay: -1s; }
.material-visual--engagement i:nth-child(4),.article-art--engagement i:nth-child(4),.choice-visual--engagement i:nth-child(4),.related-visual--engagement i:nth-child(4) { left: 57%; height: 45%; animation-delay: -1.5s; }
.material-visual--engagement i:nth-child(5),.article-art--engagement i:nth-child(5),.choice-visual--engagement i:nth-child(5),.related-visual--engagement i:nth-child(5) { left: 73%; height: 84%; animation-delay: -2s; }

.material-visual--audit i,.article-art--audit i,.choice-visual--audit i,.related-visual--audit i { inset: 12%; border: 2px solid var(--visual-color); border-radius: 50%; animation: visualSpin 15s linear infinite; }
.material-visual--audit i:nth-child(2),.article-art--audit i:nth-child(2),.choice-visual--audit i:nth-child(2),.related-visual--audit i:nth-child(2) { inset: 25%; border-style: dashed; animation-direction: reverse; }
.material-visual--audit i:nth-child(3),.article-art--audit i:nth-child(3),.choice-visual--audit i:nth-child(3),.related-visual--audit i:nth-child(3) { inset: 40%; background: var(--visual-color); animation: visualPulse 3s ease-in-out infinite; }
.material-visual--audit i:nth-child(4),.article-art--audit i:nth-child(4),.choice-visual--audit i:nth-child(4),.related-visual--audit i:nth-child(4) { left: 50%; top: 5%; bottom: 5%; width: 2px; background: var(--visual-color); }

@keyframes visualFloat { 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes visualPulse { 50% { transform: scale(.84); opacity: .45; } }
@keyframes visualPing { 50% { transform: scale(1.18); box-shadow: 0 0 0 12px color-mix(in srgb, var(--visual-color) 14%, transparent); } }
@keyframes visualWave { 50% { transform: scaleX(.58) translateX(14%); } }
@keyframes visualSpin { to { transform: rotate(360deg); } }
@keyframes visualCode { to { width: 82%; } }
@keyframes visualSlide { 50% { transform: translateX(16%); } }
@keyframes visualBars { 50% { transform: scaleY(.58); } }

@media (prefers-reduced-motion: reduce) {
  .material-visual i,
  .article-art i,
  .choice-visual i,
  .related-visual i { animation: none !important; }
}