:root {
  color-scheme: light;
  --canvas: #f7faff;
  --surface: #ffffff;
  --surface-soft: #f5f8fc;
  --surface-hover: #edf3fc;
  --ink: #101d34;
  --muted: #586b88;
  --line: #dde6f2;
  --primary: #075bea;
  --primary-hover: #034dc9;
  --on-primary: #ffffff;
  --blue-wash: #edf5ff;
  --blue-line: #cfe1ff;
  --green: #087b5c;
  --green-wash: #e9f7f1;
  --amber: #8f5b08;
  --amber-wash: #fff5df;
  --amber-line: #ebd7a5;
  --danger: #af3650;
  --danger-wash: #fff0f3;
  --violet: #6a46ba;
  --violet-wash: #f3eeff;
  --rose: #b43865;
  --rose-wash: #fff0f6;
  --shadow: 0 3px 14px #1b396205;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0d1420;
  --surface: #121e2e;
  --surface-soft: #18273b;
  --surface-hover: #20334d;
  --ink: #edf3ff;
  --muted: #afbed5;
  --line: #2a3c55;
  --primary: #5c96ff;
  --primary-hover: #78a8ff;
  --on-primary: #07162f;
  --blue-wash: #152c49;
  --blue-line: #274e7d;
  --green: #6de0b8;
  --green-wash: #153b35;
  --amber: #f2c773;
  --amber-wash: #362d1e;
  --amber-line: #65502b;
  --danger: #ff9eb2;
  --danger-wash: #3b2130;
  --violet: #bbabff;
  --violet-wash: #2c2549;
  --rose: #ffa5c8;
  --rose-wash: #3d2537;
  --shadow: none;
}
.appearance-control { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.appearance-control button { font: inherit; font-size: 13px; cursor: pointer; min-height: 38px; border: 0; border-radius: 6px; padding: 7px 13px; color: var(--muted); background: transparent; }
.appearance-control button:hover { color: var(--ink); background: var(--surface-soft); }
.appearance-control button[aria-pressed="true"] { color: var(--on-primary); background: var(--primary); font-weight: 650; }
.appearance-mobile { display: none; }
.appearance-mobile svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.appearance-mobile select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.appearance-mobile:has(select:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 760px) {
  .topbar .appearance-control { display: none; }
  .appearance-mobile { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); margin: 0; }
}