/* Dark is the default; light is an explicit, saved preference. */
:root {
  color-scheme: dark;
  --ink: #e4ebe6;
  --muted: #abb8af;
  --accent: #95cdb1;
  --paper: #111715;
  --panel: #19221e;
  --line: #334139;
  --surface-soft: #151e19;
  --surface-raised: #223027;
  --header-bg: #111715f5;
  --overlay-bg: #17221deb;
  --button-bg: #306c51;
  --button-hover: #3a7c5f;
  --button-text: #ffffff;
  --hover: #b8e3ca;
  --selection: #345c45;
  --blue-text: #a0c5e7;
  --blue-bg: #243b4b;
  --orange-text: #ecc0a1;
  --orange-bg: #422f24;
  --green-text: #b6d2a8;
  --green-bg: #2c3d29;
  --audio-text: #c4c8e5;
  --audio-bg: #292e42;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #202c2b;
  --muted: #5e6b67;
  --accent: #246653;
  --paper: #f7f8f5;
  --panel: #ffffff;
  --line: #dce2dc;
  --surface-soft: #edf1eb;
  --surface-raised: #e9efe5;
  --header-bg: #f7f8f5f5;
  --overlay-bg: #ffffffed;
  --button-bg: #246653;
  --button-hover: #184c3e;
  --button-text: #ffffff;
  --hover: #184c3e;
  --selection: #d3e8dc;
  --blue-text: #305d80;
  --blue-bg: #e0eef7;
  --orange-text: #a64c28;
  --orange-bg: #fbebe0;
  --green-text: #426541;
  --green-bg: #e6eddf;
  --audio-text: #4d5479;
  --audio-bg: #e4e5ed;
}
.theme-toggle {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--surface-raised); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: block; }
.site-nav, .project-back { margin-left: auto; }
.nav-toggle { margin-left: auto; }
@media (max-width: 1200px) { .brand-caption, .brand-divider { display: none; } }
@media (max-width: 760px) { .site-header { gap: 12px; } }