:root {
  color-scheme: light;
  --bg: #faf9f5;
  --bg-2: #f0eee6;
  --ink: #141413;
  --muted: #5c5650;
  --soft: #3d3a35;
  --line: rgba(20, 20, 19, 0.1);
  --rule: rgba(20, 20, 19, 0.08);
  --field: #faf9f5;
  --chip: #eeece4;
  --cta: #c96442;
  --on-cta: #faf9f5;
  --ok: #6b7a3d;
  --bad: #a53e2a;
  --accent: #c96442;
  --glow: rgba(201, 100, 66, 0.16);
  --panel: #f0eee6;
  --panel-soft: #e8e6dc;
  --btn: #eeece4;
  --shadow: none;
  --radius: 12px;
  --radius-sm: 8px;
  --page: var(--bg);
  --panel-strong: var(--field);
}
html[data-theme="night"] {
  color-scheme: dark;
  --bg: #141413;
  --bg-2: #1c1b19;
  --ink: #f0eee6;
  --muted: #87867f;
  --soft: #c8c5bc;
  --line: rgba(240, 238, 230, 0.12);
  --rule: rgba(240, 238, 230, 0.1);
  --field: #1c1b19;
  --chip: #252421;
  --cta: #d97757;
  --on-cta: #141413;
  --ok: #9bb56a;
  --bad: #e7a0a0;
  --accent: #d97757;
  --glow: rgba(217, 119, 87, 0.18);
  --panel: #1c1b19;
  --panel-soft: #252421;
  --btn: #252421;
  --shadow: none;
  --page: var(--bg);
  --panel-strong: var(--field);
}
body {
  background: var(--bg);
  color: var(--ink);
}
.theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  min-height: 34px;
  min-width: 64px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.theme:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.theme .icon-sun,
.theme .icon-moon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
}
.theme svg { width: 14px; height: 14px; display: block; }
html:not([data-theme="night"]) .theme .icon-sun {
  background: var(--panel);
  color: var(--ink);
}
html[data-theme="night"] .theme .icon-moon {
  background: #2a2926;
  color: var(--ink);
}
.brand .mark {
  width: 28px;
  height: 28px;
  flex: none;
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
}
.brand .mark-night { display: none; }
html[data-theme="night"] .brand .mark-day { display: none; }
html[data-theme="night"] .brand .mark-night { display: block; }
.brand .mark::after { display: none; }
html[data-theme="night"] .macbook { filter: invert(1); }