/* Dark mode: the light theme is inverted per page region, then photos and already-dark panels are
   inverted back so they keep their original look. Filters sit on body's children (not html) so
   position:fixed elements such as the header keep working. */
html[data-theme="dark"]{color-scheme:dark;background:#14171c}
html[data-theme="dark"] body{background:#14171c}
html[data-theme="dark"] body>*{filter:invert(.9) hue-rotate(180deg)}
html[data-theme="dark"] img:not([src*="/logos/"]):not([src*="compass-logo"]):not([src*="favicon"]),
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] .weekly-chart,
html[data-theme="dark"] .landing-newsletter,
html[data-theme="dark"] .explainer-takeaway,
html[data-theme="dark"] .subscribe-panel{filter:invert(1) hue-rotate(180deg)}

.theme-toggle{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:8px;padding:0;background:transparent;border:1px solid #cfc9bd;color:#26353e;cursor:pointer}
.theme-toggle:hover{background:#f3efe6}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media(max-width:700px){.theme-toggle{flex:0 0 40px;width:40px;height:40px;margin-left:auto;border-color:#c9c2b6;background:#fffefa}.menu-toggle{margin-left:8px}}