/* AzenTool theme: inversion for tools drawn with a single palette, plus the toggle button. */
html[data-az-invert="1"] { filter: invert(1) hue-rotate(180deg); background: #fff; }
html[data-az-native="dark"][data-az-invert="1"] { background: #09090b; }
/* Pictures and video are inverted back so they keep their real colours. */
html[data-az-invert="1"] :is(img, video, canvas, picture, iframe, embed, object) { filter: invert(1) hue-rotate(180deg); }
/* Preview stages and anything marked by the script: the whole box keeps its colours, and what is inside is not inverted a second time. */
html[data-az-invert="1"] :is([data-az-keep], .az-keep, #canvas.canvas, .caption-preview) { filter: invert(1) hue-rotate(180deg); }
html[data-az-invert="1"] :is([data-az-keep], .az-keep, #canvas.canvas, .caption-preview) :is(img, video, canvas, picture, iframe, embed, object, [data-az-keep], .az-keep) { filter: none; }

#az-theme-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 2147483600;
  width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: #ffffff; color: #18181b; border: 1px solid #e4e4e7;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  font: inherit; line-height: 1;
}
#az-theme-toggle:hover { border-color: #c2410c; color: #c2410c; }
#az-theme-toggle:focus-visible { outline: 2px solid #c2410c; outline-offset: 2px; }
#az-theme-toggle .az-moon { display: none; }
html[data-az-theme="dark"] #az-theme-toggle .az-sun { display: none; }
html[data-az-theme="dark"] #az-theme-toggle .az-moon { display: grid; }
#az-theme-toggle .az-sun, #az-theme-toggle .az-moon { place-items: center; }
/* Tools that are drawn dark: the button is drawn dark too, so inversion turns it light. */
html[data-az-native="dark"][data-az-invert="1"] #az-theme-toggle { background: #18181b; color: #fafafa; border-color: #27272a; }
html[data-az-native="dark"]:not([data-az-invert]) #az-theme-toggle { background: #18181b; color: #fafafa; border-color: #27272a; }
html[data-az-native="dark"][data-az-theme="dark"] #az-theme-toggle:hover { color: #e28434; border-color: #e28434; }
/* Attribute-mode tools (own dark palette): a dark button on dark pages. */
html[data-az-theme="dark"]:not([data-az-invert]) #az-theme-toggle { background: #18181b; color: #fafafa; border-color: #3f3f46; }
@media print { #az-theme-toggle { display: none; } }