/* Theme tokens cover the website UI; authentic App media retains its captured colors. */
:root { --header-bg: rgb(255 255 255 / 92%); }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-bg-canvas: #171819;
  --ds-bg-subtle: #222426;
  --ds-text-primary: #f0f0f0;
  --ds-text-secondary: #a8abad;
  --ds-border-subtle: #343638;
  --ds-action-hover: #d4d5d6;
  --header-bg: rgb(23 24 25 / 92%);
  --destructive: #ff9188;
  --input: #73777a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  color-scheme: dark;
  --ds-bg-canvas: #171819;
  --ds-bg-subtle: #222426;
  --ds-text-primary: #f0f0f0;
  --ds-text-secondary: #a8abad;
  --ds-border-subtle: #343638;
  --ds-action-hover: #d4d5d6;
  --header-bg: rgb(23 24 25 / 92%);
  --destructive: #ff9188;
  --input: #73777a;
  }
  :root:not([data-theme]) .brand-on-light { display: none; }
  :root:not([data-theme]) .brand-on-dark { display: block; }
}
:root[data-theme="dark"] .brand-on-light { display: none; }
:root[data-theme="dark"] .brand-on-dark { display: block; }
.header-actions { display: inline-flex; align-items: center; gap: 12px; }
.theme-toggle {
  width: 40px; height: 40px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--text-muted);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); background: var(--surface); }
.theme-toggle svg { display: block; }
.download > img { border-radius: 23%; outline: 1px solid var(--line); }
@media (max-width: 760px) { .header-actions { gap: 6px; } }
@media (max-width: 420px) {
  .header-actions { gap: 4px; }
  .site-header .wordmark .brand-lockup { max-width: 108px; height: auto; }
  .site-header nav { flex-wrap: wrap; justify-content: flex-end; }
}