/* Geometry-based symbols render consistently, including on iOS. */
.ui-icon {
  display: inline-block; width: 1em; height: 1em; flex-shrink: 0;
  vertical-align: -.125em; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none; overflow: visible;
}
.motion-toggle { display: grid; place-items: center; }
.motion-toggle .ui-icon { width: 16px; height: 16px; }
.option[aria-pressed=true] .option-mark::after { content: none; }
.option-mark .ui-icon { opacity: 0; width: 75%; height: 75%; }
.option[aria-pressed=true] .option-mark .ui-icon { opacity: 1; }
.footer-links .ui-icon { margin-left: .25em; }
.close-dialog > span { display: inline-flex; align-items: center; }
.reference-play .ui-icon { vertical-align: -.15em; }