/* Exact captured X geometry is filled, never approximated by thicker strokes. */
html [data-icon-family="pulse"] { display: none; }
html [data-icon-family="x"] { display: inline; }
html svg[data-appearance-icon],
html [data-icon-family="x"] {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}
html [data-icon-state="active"] { display: none; }
html :is([aria-pressed="true"], [aria-current="page"], .active, .is-active, .is-open) > svg[data-appearance-icon] [data-icon-state="default"]:has(+ [data-icon-state="active"]) { display: none; }
html :is([aria-pressed="true"], [aria-current="page"], .active, .is-active, .is-open) > svg[data-appearance-icon] [data-icon-state="active"] { display: inline; }
html .compose-toggle.is-open svg[data-appearance-icon="compose"] { transform: none; }

/* Audio and source controls keep the existing semantic state and color. */
html :is(.is-playing, [data-state="checked"]) > svg[data-appearance-icon] [data-icon-state="default"]:has(+ [data-icon-state="active"]) { display: none; }
html :is(.is-playing, [data-state="checked"]) > svg[data-appearance-icon] [data-icon-state="active"] { display: inline; }
@media (prefers-reduced-motion: reduce) {
  svg[data-appearance-icon="loader"] { animation: none !important; }
}

/* Respect the existing text-size settings; dimensions stay in appearance.css. */
html svg[data-appearance-icon] use { pointer-events: none; }
/* react-tweet already supplies X paths; avoid inherited shell outlines. */
html .pulse-tweet-embed svg {
  fill: currentColor;
  stroke: none;
  stroke-width: 0;
}
html .feed-desktop-account svg[data-appearance-icon="ellipsis"] { width: 20px; height: 20px; }