body[data-appearance="forest"] {
  --app-accent: rgb(167, 196, 159);
  --app-accent-on: rgb(32, 48, 46);
  --ehd-key-active: rgb(167, 196, 159);
  --ehd-forest-sheet-bg: rgb(24, 38, 37);
  --ehd-forest-box-bg: rgb(18, 30, 29);
  --ehd-forest-box-deep-bg: rgb(12, 22, 21);
  --ehd-forest-chip-bg: rgba(0, 0, 0, 0.34);
  --lyrium-rainbow: linear-gradient(
    90deg,
    rgb(153, 117, 133) 0%,
    rgb(163, 138, 122) 25%,
    rgb(153, 148, 122) 50%,
    rgb(128, 153, 138) 75%,
    rgb(128, 140, 168) 100%
  );
  --chrome-title-gradient: var(--lyrium-rainbow);
  --ehd-accent-gradient: var(--lyrium-rainbow);
  --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;
  --ehd-guitar-board-bg: rgb(8, 16, 15);
  --ehd-guitar-nut: rgba(238, 244, 232, 0.72);
  --ehd-guitar-fret: rgba(238, 244, 232, 0.24);
  --ehd-guitar-string: rgba(238, 244, 232, 0.38);
  --ehd-guitar-label: rgba(238, 244, 232, 0.68);
  --ehd-guitar-finger: rgb(32, 48, 46);
}

body[data-appearance="forest"] {
  font-family: var(--ehd-font-sans);
}

body[data-appearance="forest"] .ehd-stage {
  overflow: visible;
  min-height: auto;
}

body[data-appearance="forest"] .ehd-stage.landing-stage {
  --sheet-bg: var(--ehd-forest-sheet-bg);
}

body[data-appearance="forest"] .ehd-ribbon {
  display: block;
}

body[data-appearance="forest"] .ehd-content {
  position: relative;
  z-index: 2;
}

body[data-appearance="forest"] .ehd-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--app-separator);
}

body[data-appearance="forest"] .ehd-kicker {
  font:
    700 0.78rem/1 ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--app-accent);
}

body[data-appearance="forest"] .ehd-header h1 {
  font-family: var(--ehd-font-sans);
  margin: 0;
  max-width: 42rem;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  background: var(--chrome-title-gradient);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

body[data-appearance="forest"] .ehd-section {
  padding: 0.85rem;
  border-top: 6px solid var(--section-color, var(--app-accent));
  background: var(--ehd-forest-box-bg);
}

body[data-appearance="forest"] .ehd-section h2 {
  font-family: var(--ehd-font-serif);
  color: rgb(238, 244, 232);
}

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

body[data-appearance="forest"] .ehd-controls,
body[data-appearance="forest"] .ehd-filters {
  background: var(--ehd-forest-box-bg);
  border-color: var(--app-separator);
}

body[data-appearance="forest"] .ehd-table-wrap {
  border-color: color-mix(in srgb, var(--section-color) 45%, var(--app-separator));
  background: var(--ehd-forest-box-deep-bg);
}

body[data-appearance="forest"] .ehd-table tbody {
  background: var(--ehd-forest-box-deep-bg);
}

body[data-appearance="forest"] .ehd-chord,
body[data-appearance="forest"] .ehd-chord-face {
  color: rgb(238, 244, 232);
}

body[data-appearance="forest"] .ehd-chord {
  border-color: rgba(238, 244, 232, 0.22);
  background: var(--ehd-forest-box-deep-bg);
}

body[data-appearance="forest"] .ehd-chord:hover,
body[data-appearance="forest"] .ehd-chord:focus-visible {
  background: rgb(20, 34, 33);
  border-color: var(--app-accent);
}

body[data-appearance="forest"] .ehd-filter-chip,
body[data-appearance="forest"] .ehd-appearance-btn,
body[data-appearance="forest"] .ehd-transpose-step,
body[data-appearance="forest"] .ehd-voicing-step {
  background: var(--ehd-forest-chip-bg);
}

body[data-appearance="forest"] .ehd-filter-chip:hover,
body[data-appearance="forest"] .ehd-filter-chip:focus-visible,
body[data-appearance="forest"] .ehd-appearance-btn:hover,
body[data-appearance="forest"] .ehd-appearance-btn:focus-visible,
body[data-appearance="forest"] .ehd-transpose-step:hover,
body[data-appearance="forest"] .ehd-transpose-step:focus-visible,
body[data-appearance="forest"] .ehd-voicing-step:hover,
body[data-appearance="forest"] .ehd-voicing-step:focus-visible {
  background: rgb(20, 34, 33);
}

body[data-appearance="forest"] .ehd-degree {
  background: rgba(0, 0, 0, 0.28);
}

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

body[data-appearance="forest"] .ehd-transpose-step {
  color: rgb(238, 244, 232);
}

body[data-appearance="forest"] .ehd-transpose-step:hover,
body[data-appearance="forest"] .ehd-transpose-step:focus-visible {
  border-color: var(--app-accent);
  color: rgb(238, 244, 232);
}

body[data-appearance="forest"] .ehd-popover {
  background: var(--ehd-forest-box-bg);
}

@media (max-width: 620px) {
  body[data-appearance="forest"] .ehd-main-wrap {
    padding: 0 0 2rem;
  }
}