:root {
  --page-width: min(100vw, 760px);
  --speaker: #2a9fc6;
  --bubble-ink: #24303a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #303434;
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
}

.image-reader {
  width: var(--page-width);
  margin: 0 auto;
  padding: 44px 0 80px;
}

.course-meta {
  padding: 0 0 26px;
  color: #f4f6f1;
  font-size: clamp(18px, 4vw, 34px);
  line-height: 1.45;
}

.course-meta p {
  margin: 0 0 14px;
}

.pages {
  display: grid;
  gap: 38px;
}

.page-image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  background: #f8f2d6;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.page-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.hotspot {
  position: absolute;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.hotspot::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: clamp(18px, 4vw, 28px);
  height: clamp(18px, 4vw, 28px);
  border: 1px solid rgba(40, 130, 160, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  transform: translate(-100%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.hotspot::after {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(18px, 4vw, 28px) - 1px);
  top: 50%;
  width: clamp(10px, 2vw, 15px);
  height: clamp(10px, 2vw, 15px);
  background: var(--speaker);
  clip-path: polygon(0 30%, 42% 30%, 100% 0, 100% 100%, 42% 70%, 0 70%);
  transform: translate(-100%, -50%);
}

.hotspot.word::before,
.hotspot.word::after {
  opacity: .78;
}

.hotspot:hover,
.hotspot:focus-visible {
  outline: 2px solid rgba(42, 159, 198, .7);
  background: rgba(85, 196, 224, .1);
}

.bubble {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 28px));
  padding: 12px 14px;
  border: 1px solid rgba(75, 66, 90, .2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  color: var(--bubble-ink);
  font-size: 15px;
  line-height: 1.45;
  transform: translate(-50%, 120%);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.bubble.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.bubble strong {
  display: block;
  margin-bottom: 3px;
  color: #8a5795;
}

.bubble small {
  display: block;
  margin-top: 6px;
  color: #6d7780;
}