:root {
  color-scheme: light;
  --background: #fff;
  --text: #111;
  --accent: #ff6a00;
  --muted: #666;
  --line: #d3d3d3;
  --ink: var(--text);
  --paper: var(--background);
  --divider-line: var(--accent);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #111;
  --text: #f4f4f4;
  --accent: #ff8a3d;
  --muted: #aaa;
  --line: #444;
}

html { background: var(--background); }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.theme-toggle {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--background);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.theme-toggle::before {
  content: "";
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme-toggle-fixed { position: fixed; top: 22px; right: 22px; z-index: 2; }
@media (max-width: 560px) {
  .theme-toggle-fixed { top: 18px; right: 18px; }
  .header-actions { gap: 0.65rem; }
}