body[data-appearance="dark"] {
  color-scheme: dark;
  --app-bg: rgb(18, 16, 28);
  --app-text: rgb(236, 232, 244);
  --app-elevated: rgb(32, 28, 46);
  --app-bar: rgb(24, 20, 36);
  --app-accent: rgb(140, 168, 210);
  --app-accent-on: rgb(16, 14, 24);
  --app-separator: rgba(255, 255, 255, 0.12);
  --app-muted: rgba(236, 232, 244, 0.68);
  --ehd-bg-deep: rgb(14, 12, 22);
  --ehd-panel-bg: rgb(22, 19, 32);
  --ehd-key-active: rgb(140, 168, 210);
  --ehd-accent-gradient: linear-gradient(90deg, rgb(255, 120, 154), rgb(186, 140, 255));
  --ehd-degree-tonic: rgb(120, 160, 210);
  --ehd-degree-predominant: rgb(130, 175, 155);
  --ehd-degree-dominant: rgb(120, 160, 210);
  --ehd-degree-borrowed: rgb(155, 140, 200);
  --ehd-degree-chromatic: rgb(200, 145, 120);
  --ehd-degree-modal: rgba(236, 232, 244, 0.55);
  --ehd-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ehd-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Helvetica Neue", sans-serif;
}

body[data-appearance="dark"] {
  font-family: var(--ehd-font-sans);
  background:
    radial-gradient(circle at 10% 8%, rgba(140, 168, 210, 0.1), transparent 24rem),
    radial-gradient(circle at 88% 6%, rgba(155, 140, 200, 0.08), transparent 26rem),
    var(--ehd-bg-deep);
}

body[data-appearance="dark"] .ehd-stage {
  width: min(62rem, 96vw);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.75rem) clamp(0.9rem, 3vw, 1.25rem) 3rem;
}

body[data-appearance="dark"] .ehd-header h1 {
  font-family: var(--ehd-font-serif);
  font-size: clamp(1.85rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgb(186, 198, 228);
  background: none;
}

body[data-appearance="dark"] .ehd-kicker {
  font-family: var(--ehd-font-sans);
  color: var(--app-accent);
}

body[data-appearance="dark"] .ehd-lead,
body[data-appearance="dark"] .ehd-section-intro {
  font-family: var(--ehd-font-serif);
}

body[data-appearance="dark"] .ehd-controls,
body[data-appearance="dark"] .ehd-filters {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

body[data-appearance="dark"] .ehd-section {
  padding: 1rem 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--section-color) 35%, var(--app-separator));
  background: var(--ehd-panel-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

body[data-appearance="dark"] .ehd-section h2 {
  font-family: var(--ehd-font-serif);
  font-weight: 600;
}

body[data-appearance="dark"] .ehd-section-marker {
  box-shadow: none;
}

body[data-appearance="dark"] .ehd-table-wrap {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

body[data-appearance="dark"] .ehd-chord {
  border-radius: 5px;
  color: var(--app-text);
  background: rgba(255, 255, 255, 0.06);
}

body[data-appearance="dark"] .ehd-filter-chip.is-active,
body[data-appearance="dark"] .ehd-notation-btn.is-active,
body[data-appearance="dark"] .ehd-appearance-btn.is-active,
body[data-appearance="dark"] .ehd-popover-tab.is-active {
  background: var(--ehd-accent-gradient);
  border-color: transparent;
  color: white;
}

body[data-appearance="dark"] .ehd-popover {
  border-radius: 10px;
  background: var(--app-bar);
}

body[data-appearance="dark"] .ehd-popover-title {
  color: var(--app-accent);
}

body[data-appearance="dark"] .ehd-footer {
  background: var(--app-bar);
}

body[data-appearance="dark"] {
  --ehd-guitar-board-bg: rgba(0, 0, 0, 0.32);
  --ehd-guitar-nut: rgba(236, 232, 244, 0.7);
  --ehd-guitar-fret: rgba(236, 232, 244, 0.22);
  --ehd-guitar-string: rgba(236, 232, 244, 0.36);
  --ehd-guitar-label: rgba(236, 232, 244, 0.68);
  --ehd-guitar-finger: rgb(16, 14, 24);
}