body.dark {
  color-scheme: dark;
  background-color: #0b1120;
  color: #e2e8f0;
}

html.dark-theme-pending body {
  color-scheme: dark;
  background-color: #0b1120;
  color: #e2e8f0;
}

body.dark header,
body.dark .bg-white {
  background-color: #111827;
}

body.dark .bg-slate-50 {
  background-color: #0b1120;
}

body.dark .bg-indigo-50 {
  background-color: #1e1b4b;
}

body.dark .bg-amber-50 {
  background-color: #422006;
}

body.dark .bg-emerald-50 {
  background-color: #052e25;
}

body.dark .bg-rose-50 {
  background-color: #4c0519;
}

body.dark .border-slate-100,
body.dark .border-slate-200,
body.dark .border-slate-300 {
  border-color: #334155;
}

body.dark .border-indigo-100,
body.dark .border-indigo-200 {
  border-color: #4338ca;
}

body.dark .border-amber-200 {
  border-color: #92400e;
}

body.dark .border-emerald-200 {
  border-color: #047857;
}

body.dark .text-slate-950,
body.dark .text-slate-900,
body.dark .text-slate-800,
body.dark .text-slate-700 {
  color: #f1f5f9;
}

body.dark .text-slate-600,
body.dark .text-slate-500 {
  color: #cbd5e1;
}

body.dark .text-slate-400 {
  color: #94a3b8;
}

body.dark .text-indigo-950,
body.dark .text-indigo-700,
body.dark .text-indigo-600 {
  color: #c7d2fe;
}

body.dark .text-amber-950,
body.dark .text-amber-900 {
  color: #fde68a;
}

body.dark .text-emerald-800,
body.dark .text-emerald-700 {
  color: #a7f3d0;
}

body.dark .text-rose-800,
body.dark .text-rose-700 {
  color: #fecdd3;
}

body.dark input:not([type="checkbox"]) {
  border-color: #475569;
  background-color: #0f172a;
  color: #f1f5f9;
}

body.dark input::placeholder {
  color: #94a3b8;
}

body.dark .drop-zone {
  border-color: #475569;
  background-color: #0f172a;
}

body.dark .drop-zone.is-dragging {
  border-color: #818cf8;
  background-color: #1e1b4b;
}

body.dark .device-choice[aria-pressed="false"] {
  border-color: #334155;
  background-color: #111827;
}

body.dark .device-choice[aria-pressed="true"] {
  border-color: #818cf8;
  background-color: #1e1b4b;
  --tw-ring-color: rgb(99 102 241 / 0.2);
}

body.dark a:not([aria-current="page"]):hover {
  background-color: #1e293b;
}

body.dark #device-note,
body.dark #mac-instructions,
body.dark #ios-steps,
body.dark #converter-form {
  color: #cbd5e1;
}

@media (prefers-reduced-motion: no-preference) {
  body,
  body header,
  body main section,
  body main aside,
  body input,
  body button,
  body a {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
}