.material-mark { position: relative; width: 100%; aspect-ratio: 1; }
.material-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.material-mark-light { opacity: .18; transition: opacity 280ms ease; }
.material-mark-sweep { transform: translateX(1950px); opacity: .35; }
html.motion-ready:not(.motion-paused) .material-in-view .material-mark-sweep { animation: mark-light-pass 9s ease-in-out infinite; }
html.motion-ready:not(.motion-paused) [data-material-surface]:is(:hover, :focus-within) .material-mark-light {
  opacity: .75;
  transform: translate(calc(var(--surface-x, 0) * 800px), calc(var(--surface-y, 0) * 650px));
}
.material-mark-graphite .material-mark-light { opacity: .1; }
@keyframes mark-light-pass {
  0%, 12% { transform: translateX(0); opacity: 0; }
  28% { opacity: .7; }
  68% { opacity: .7; }
  85%, 100% { transform: translateX(5200px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .material-mark * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active), print {
  .material-mark { display: none; }
}