:root {
  color-scheme: light;
  --hn-bg: #f6f5f1;
  --hn-card: #ffffff;
  --hn-hero: #f4f2ec;
  --hn-chip: #f0efe9;
  --hn-ink: #1b1a17;
  --hn-mut: #4a483f;
  --hn-soft: #75726a;
  --hn-faint: #6b6860;
  --hn-ghost: #a09d94;
  --hn-edge: #e6e3da;
  --hn-edge-soft: #eeece5;
  --hn-edge-hover: #c9c5b8;
  --hn-edge-pill: #dedbd2;
  --hn-hr: rgba(27,26,23,0.13);
  --hn-row: rgba(27,26,23,0.08);
  --hn-border: rgba(27,26,23,0.16);
  --hn-b2: rgba(27,26,23,0.09);
  --hn-b3: rgba(27,26,23,0.24);
  --hn-accent: #2563eb;
  --hn-accent-strong: #1d4ed8;
  --hn-accent-soft: rgba(37,99,235,0.09);
  --hn-on-accent: #ffffff;
  --hn-green: #1f7a4d;
  --hn-green-mark: #34a36f;
  --hn-green-soft: rgba(31,122,77,0.09);
  --hn-warn: #8f610e;
  --hn-warn-soft: rgba(143,97,14,0.09);
  --hn-red: #b4453a;
  --hn-red-soft: rgba(180,69,58,0.09);
  --hn-brand: #0E5F59;
  --shadow-card: 0 0 0 1px rgba(27,26,23,0.08), 0 1px 2px -1px rgba(27,26,23,0.06), 0 2px 4px rgba(27,26,23,0.04);
  --shadow-float: 0 0 0 1px rgba(27,26,23,0.10), 0 2px 4px rgba(27,26,23,0.04), 0 8px 16px -4px rgba(27,26,23,0.08), 0 24px 48px -16px rgba(27,26,23,0.14);
  --hn-on-ink: #ffffff;
  --hn-on-ink-dim: rgba(255,255,255,0.60);
  --hn-hover: rgba(27,26,23,0.05);
  --hn-track: rgba(27,26,23,0.12);
  --hn-thumb: #ffffff;
  --hn-thumb-ring: 0 0 0 1px rgba(27,26,23,0.16), 0 1px 2px rgba(27,26,23,0.20), 0 4px 8px rgba(27,26,23,0.10);
  --hn-link-rule: rgba(29,78,216,0.35);
  --hn-nav-veil: rgba(246,245,241,0.82);
  --hn-fade-0: #f6f5f100;
  --hn-fade-1: #f6f5f1;
  --hn-btn-from: #3b7bf5;
  --hn-btn-to: #1d4ed8;
  --hn-btn-fg: #ffffff;
  --hn-btn-shadow: 0 0 0 1px #1d4ed8, inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(23,58,158,0.45), 0 1px 2px rgba(29,78,216,0.20), 0 4px 8px rgba(29,78,216,0.14), 0 8px 16px rgba(29,78,216,0.10);
  --shadow-lift: 0 0 0 1px rgba(27,26,23,0.10), 0 2px 4px rgba(27,26,23,0.05), 0 12px 24px -8px rgba(27,26,23,0.12);
  --lp-bg: #f6f5f1;
  --lp-fg: #1b1a17;
  --lp-accent: #2563eb;
  --lp-accent-14: rgba(37,99,235,0.14);
  --lp-accent-28: rgba(37,99,235,0.28);
}

html.dark {
  color-scheme: dark;
  --hn-bg: #000000;
  --hn-card: #121212;
  --hn-hero: #090909;
  --hn-chip: #1a1a1a;
  --hn-ink: #ffffff;
  --hn-mut: #a1a1a1;
  --hn-soft: #8a8a8a;
  --hn-faint: #8a8a8a;
  --hn-ghost: #5e5e5e;
  --hn-edge: rgba(255,255,255,0.12);
  --hn-edge-soft: rgba(255,255,255,0.08);
  --hn-edge-hover: rgba(255,255,255,0.24);
  --hn-edge-pill: rgba(255,255,255,0.20);
  --hn-hr: rgba(255,255,255,0.12);
  --hn-row: rgba(255,255,255,0.08);
  --hn-border: rgba(255,255,255,0.12);
  --hn-b2: rgba(255,255,255,0.08);
  --hn-b3: rgba(255,255,255,0.24);
  --hn-accent: #70b8ff;
  --hn-accent-strong: #8fc8ff;
  --hn-accent-soft: rgba(112,184,255,0.12);
  --hn-on-accent: #06132b;
  --hn-green: #4cc38a;
  --hn-green-mark: #4cc38a;
  --hn-green-soft: rgba(76,195,138,0.13);
  --hn-warn: #e8a33c;
  --hn-warn-soft: rgba(232,163,60,0.13);
  --hn-red: #f87171;
  --hn-red-soft: rgba(248,113,113,0.13);
  --hn-brand: #5AC8BC;
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-float: 0 0 0 1px rgba(255,255,255,0.12);
  --hn-on-ink: #000000;
  --hn-on-ink-dim: rgba(0,0,0,0.58);
  --hn-hover: rgba(255,255,255,0.07);
  --hn-track: rgba(255,255,255,0.20);
  --hn-thumb: #ffffff;
  --hn-thumb-ring: 0 0 0 1px rgba(255,255,255,0.24);
  --hn-link-rule: rgba(112,184,255,0.40);
  --hn-nav-veil: rgba(0,0,0,0.82);
  --hn-fade-0: #00000000;
  --hn-fade-1: #000000;
  --hn-btn-from: #8fc8ff;
  --hn-btn-to: #70b8ff;
  --hn-btn-fg: #06132b;
  --hn-btn-shadow: 0 0 0 1px rgba(255,255,255,0.20);
  --shadow-lift: 0 0 0 1px rgba(255,255,255,0.20);
  --lp-bg: #ffffff;
  --lp-fg: #1a1a1a;
  --lp-accent: #70b8ff;
  --lp-accent-14: rgba(112,184,255,0.14);
  --lp-accent-28: rgba(112,184,255,0.28);
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hn-faint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.theme-btn:hover { color: var(--hn-ink); background: var(--hn-chip); }
.theme-btn svg { width: 17px; height: 17px; display: block; }
.theme-btn .i-sun { display: none; }
html.dark .theme-btn .i-sun { display: block; }
html.dark .theme-btn .i-moon { display: none; }