:root {
  --poetry-toolbar-green: #08794d;
  --poetry-toolbar-soft: #edf7f1;
}

.poem-hero {
  padding-top: 28px;
}

.poem-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.poem-toolbar .poem-genre {
  position: static;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poem-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.poem-toolbar .poem-tool-button {
  position: static;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--poetry-toolbar-green);
  border-radius: 6px;
  background: #fff;
  color: var(--poetry-toolbar-green);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.poem-toolbar .poem-tool-button:hover,
.poem-toolbar .poem-tool-button:focus-visible,
.poetry-audio-button:hover,
.poetry-audio-button:focus-visible {
  background: var(--poetry-toolbar-soft);
}

.poem-toolbar .poetry-pdf-button[hidden] {
  display: none;
}

.poem-toolbar .pinyin-toggle {
  min-width: 58px;
}

.poem-toolbar .pinyin-toggle[aria-pressed="true"] {
  background: var(--poetry-toolbar-green);
  color: #fff;
}

.poetry-audio-button {
  position: relative;
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--poetry-toolbar-green);
  border-radius: 50%;
  background: #fff;
  color: var(--poetry-toolbar-green);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}

.poetry-audio-button::before {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
  content: "";
  transform: translateX(1px);
}

.poetry-audio-button.is-playing::before,
.poetry-audio-button[aria-pressed="true"]::before {
  width: 10px;
  height: 12px;
  border: 0;
  background: linear-gradient(
    to right,
    currentColor 0 3px,
    transparent 3px 7px,
    currentColor 7px 10px
  );
  transform: none;
}

.poetry-audio-button img {
  display: none;
}

.poetry-audio-button.is-loading::before {
  opacity: 0.45;
}

.poetry-audio-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.poem-toolbar + h1 {
  margin: 18px 0 8px;
}

.poem-toolbar .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .poem-hero {
    padding: 20px 18px 28px;
  }

  .poem-toolbar + h1 {
    margin: 10px 0 6px;
  }
}

@media (max-width: 560px) {
  .poem-hero {
    padding: 16px 12px 24px;
  }

  .poem-toolbar {
    gap: 8px;
  }

  .poem-toolbar-actions {
    gap: 6px;
  }

  .poem-toolbar .poem-genre {
    font-size: 14px;
  }

  .poem-toolbar .poem-tool-button {
    min-height: 40px;
    padding: 0 9px;
    font-size: 14px;
  }

  .poem-toolbar .pinyin-toggle {
    min-width: 48px;
  }
}

@media print {
  .poem-toolbar-actions {
    display: none !important;
  }
}