:root {
  color-scheme: light;
  --bg: #f8f7f4;
  --surface: #fff;
  --ink: #242421;
  --text-strong: #4b4e43;
  --muted: #76766e;
  --subtle: #85857b;
  --line: #e4e3dd;
  --accent: #e95632;
  --soft: #eeede7;
  --raised: #e7e5df;
  --header: #f8f7f4f5;
  --footer: #f1f0eb;
  --app-bg: #f5f4f0;
  --input-bg: #fcfcfa;
  --preview-bg: #eae8e2;
  --preview-overlay: #eae8e2ed;
  --inverse-bg: #282824;
  --inverse-text: #fff;
  --inverse-hover: #3b3b36;
  --orange-bg: #fff0e9;
  --orange-text: #b34e31;
  --orange-line: #f0d6ca;
  --green-bg: #eef5ec;
  --green-text: #4f7451;
  --green-line: #dbe8d8;
  --red-bg: #fff0ee;
  --red-text: #b34333;
  --red-line: #f0cfc5;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0e0e0e;
  --ink: #f5f5f0;
  --text-strong: #d7d7d1;
  --muted: #aaa9a2;
  --subtle: #93938c;
  --line: #2a2a28;
  --soft: #191919;
  --raised: #242424;
  --header: #000000f5;
  --footer: #080808;
  --app-bg: #000000;
  --input-bg: #111111;
  --preview-bg: #101010;
  --preview-overlay: #101010ed;
  --inverse-bg: #f1f0e9;
  --inverse-text: #181815;
  --inverse-hover: #dcdcd4;
  --orange-bg: #29150e;
  --orange-text: #f2a184;
  --orange-line: #623725;
  --green-bg: #142218;
  --green-text: #a0c5a0;
  --green-line: #304e35;
  --red-bg: #2b1412;
  --red-text: #efaaa0;
  --red-line: #5b3029;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--soft); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
.break-url { overflow-wrap: anywhere; }