:root {
  color-scheme: light;
  background: #fff;
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #fff;
  color: #000;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

main {
  width: 100%;
  max-width: 34rem;
  min-height: 100svh;
  padding: max(4.5rem, env(safe-area-inset-top)) 1.25rem max(3rem, env(safe-area-inset-bottom));
}

.index-page {
  padding-top: max(4.5rem, env(safe-area-inset-top));
}

.sound-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

h1,
h2,
p {
  margin: 0;
  font: inherit;
}

h1 {
  margin-bottom: 3.2rem;
}

h2 {
  margin: 3.2rem 0 1rem;
}

.catalog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.catalog h2:first-child {
  margin-top: 0;
}

.catalog .plain-link {
  margin-bottom: 0.7rem;
}

.poem {
  white-space: pre-line;
  margin-bottom: 3.2rem;
}

.citation {
  margin-bottom: 1.2rem;
}

.audio-title {
  margin-bottom: 3.2rem;
}

.listen-control,
.plain-link {
  appearance: none;
  display: inline;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.listen-control:focus-visible,
.plain-link:focus-visible {
  outline: 1px solid #000;
  outline-offset: 0.25rem;
}

audio {
  display: none;
}

@media (min-width: 48rem) {
  main {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}