:root {
  --poetic-font: 15px/1.8 "LXGW WenKai","Noto Serif SC",serif;
  --poetic-transition: 380ms;
  --poetic-color: #222;
  --poetic-accent: #556b8d;
}


[data-theme="quiet"] {
  --poetic-color: #222;
  --poetic-accent: #556b8d;
}

[data-theme="night"] {
  --poetic-color: #e6ecf1;
  --poetic-accent: #7fb4ff;
  color-scheme: dark;
}

[data-theme="warm"] {
  --poetic-color: #2c1a10;
  --poetic-accent: #c26130;
  /* background: #fffaf6; */
}

[data-theme="forest"] {
  --poetic-color: #1d3324;
  --poetic-accent: #3a7a55;
  /* background: #f4f8f5; */
}

#poetic {
  font: var(--poetic-font);
  color: var(--poetic-color);
  background: transparent;
  border: none;
  margin: 0;
  padding: 0 0 0.75rem;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--poetic-transition) ease,
              transform var(--poetic-transition) ease;
}

#poetic.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#poetic:active {
  opacity: .55;
}