/* app/javascript/react/styles/bookReader.css */
.book-reader {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.first-letter p:first-of-type:first-letter {
  float: left;
  color: var(--accent-color, #8b5cf6);
  margin-top: .1em;
  margin-right: .15em;
  font-family: serif;
  font-size: 3.8em;
  font-weight: bold;
  line-height: .8;
}

.scene-text {
  margin: 0;
  padding: 0;
}

.scene-text p {
  margin-bottom: 1.2em;
}

.scene-text p:last-child {
  margin-bottom: 0;
}

.scene-text a {
  color: var(--link-color, #8b5cf6);
  text-decoration: none;
  position: relative;
  transition: color .2s;
}

.scene-text a:hover {
  color: var(--link-hover-color, #7c3aed);
}

.scene-text a:after {
  content: "";
  position: absolute;
  background-color: var(--link-color, #8b5cf6);
  transform-origin: bottom right;
  width: 100%;
  height: 1px;
  transition: transform .3s;
  bottom: -2px;
  left: 0;
  transform: scaleX(0);
}

.scene-text a:hover:after {
  transform-origin: bottom left;
  transform: scaleX(1);
}

.fullscreen-mode .first-letter p:first-of-type:first-letter {
  margin-right: .12em;
  font-size: 4em;
  line-height: .75;
}

@media (max-width: 480px) {
  .hide-on-mobile {
    display: none;
  }
}

.fullscreen-reader, .fullscreen-mode {
  background-color: var(--bg-color, #f7f4e9);
  position: fixed !important;
  z-index: 9999 !important;
  display: flex !important;
  overflow: hidden !important;
  flex-direction: column !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: 0 !important;
}

.fullscreen-mode .book-content-container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  position: relative !important;
  flex: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 4rem 1rem 2rem !important;
}

.fullscreen-content {
  display: flex !important;
  overflow: auto !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
}

.fullscreen-mode .split-layout, .fullscreen-mode .stacked-layout {
  overflow: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
}

.fullscreen-mode .split-layout {
  display: flex !important;
  aspect-ratio: 16 / 9 !important;
  flex-direction: row !important;
  width: 96% !important;
  max-width: 1800px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 7rem) !important;
  margin: 0 auto !important;
}

.fullscreen-mode .split-layout .left-page, .fullscreen-mode .split-layout .right-page {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 50% !important;
  justify-content: center !important;
  width: 50% !important;
  height: auto !important;
  min-height: 60vh !important;
}

.fullscreen-mode .stacked-layout > div, .fullscreen-mode .split-layout .left-page > div {
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: auto !important;
  min-height: 0 !important;
}

.fullscreen-mode .split-layout .right-page > div {
  overflow: visible !important;
  display: flex !important;
  justify-content: center !important;
  align-items:  center !important;
  height: 100% !important;
}

.fullscreen-mode .split-layout .right-page img {
  object-fit: contain !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 60vh !important;
}

.fullscreen-mode .stacked-layout div[dangerouslySetInnerHTML], .fullscreen-mode .split-layout div[dangerouslySetInnerHTML] {
  overflow: visible !important;
  max-height: none !important;
}

.fullscreen-mode .scene-text {
  overflow: visible !important;
  word-break: normal !important;
  word-wrap: break-word !important;
  width: 100% !important;
}

@media (max-width: 767px) and (orientation: landscape) {
  .book-spread {
    height: calc(100vh - 9rem) !important;
    min-height: 300px !important;
  }

  .book-page {
    overflow-y: auto;
    max-height: calc(100vh - 9rem);
  }

  .fullscreen-mode .book-content-container {
    padding-top: 3.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .fullscreen-mode .split-layout, .fullscreen-mode .stacked-layout {
    max-height: none !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 767px) {
  .fullscreen-mode .book-content-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    height: calc(100% - 3.5rem) !important;
    min-height: calc(100% - 3.5rem) !important;
    max-height: calc(100% - 3.5rem) !important;
    padding-top: 3.5rem !important;
  }

  .fullscreen-mode .stacked-layout img, .fullscreen-mode .scene-image {
    position: relative !important;
    max-height: 35vh !important;
    margin-top: 1rem !important;
  }

  .fullscreen-mode .stacked-layout {
    display: block !important;
    position: relative !important;
    margin-top: 1rem !important;
    top: 0 !important;
  }

  .fullscreen-mode .stacked-layout > div {
    display: block !important;
    position: relative !important;
    padding-top: 2rem !important;
  }

  .fullscreen-mode .stacked-layout > div {
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: none !important;
    padding-bottom: 2rem !important;
  }

  .fullscreen-mode .scene-text {
    overflow: visible !important;
    position: relative !important;
    max-height: none !important;
  }

  .fullscreen-mode .scene-content {
    overflow: visible !important;
    position: relative !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .book-content-container {
    padding-top: 1rem !important;
  }

  .stacked-layout {
    margin-top: 0 !important;
  }

  .stacked-layout img {
    max-height: 450px !important;
  }

  @media (orientation: landscape) {
    .split-layout {
      min-height: 70vh !important;
    }

    .split-layout .right-page img {
      max-width: 95% !important;
      max-height: 90% !important;
    }

    .book-content-container {
      padding-top: .5rem !important;
    }

    .fullscreen-mode .book-content-container {
      padding-top: 4rem !important;
    }
  }

  .bottom-nav {
    padding: 1rem;
  }

  .bottom-nav button {
    font-size: 1.1rem;
    padding: .75rem 1.5rem !important;
  }

  .fullscreen-mode .stacked-layout img {
    max-height: 35vh !important;
  }

  .fullscreen-mode .book-content-container {
    overflow-y: auto !important;
    height: calc(100% - 8rem) !important;
    max-height: none !important;
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
  }
}

@media (min-width: 1024px) and (max-width: 1366px) {
  .book-content-container {
    padding-top: 1.5rem !important;
  }

  .split-layout {
    width: 98% !important;
    max-width: 1300px !important;
  }

  .split-layout .right-page img {
    max-height: 85% !important;
  }

  .fullscreen-mode .book-content-container {
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
  }

  .fullscreen-mode .split-layout {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

@supports (-webkit-touch-callout: none) {
  .book-reader {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }

  .bottom-nav, .top-nav {
    position: sticky;
  }

  .fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .fullscreen-mode .book-content-container {
    height: calc(100% - 4rem) !important;
    max-height: calc(100% - 4rem) !important;
    min-height: calc(100% - 4rem) !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
  }

  .fullscreen-mode .split-layout {
    display: flex !important;
    flex-direction: row !important;
    width: 96% !important;
    height: calc(100% - 8rem) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 8rem) !important;
    margin: 0 auto !important;
    max-width: 1800px !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
  }

  .fullscreen-mode .stacked-layout {
    margin: 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
  }

  @media (orientation: portrait) {
    .fullscreen-mode {
      height: 100vh !important;
      height: -webkit-fill-available !important;
    }

    .fullscreen-mode .book-content-container {
      padding-top: 4rem !important;
      padding-bottom: 2rem !important;
    }
  }

  @media (orientation: landscape) {
    .fullscreen-mode .split-layout .left-page, .fullscreen-mode .split-layout .right-page {
      padding: 1rem 2rem !important;
    }
  }
}

.fullscreen-mode .reader-navigation {
  position: absolute !important;
  z-index: 10 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.page-transition {
  transition: opacity .4s, transform .4s;
}

.page-transition.exiting {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition.entering {
  opacity: 0;
  animation: fadeIn .4s ease forwards;
  transform: translateY(-20px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes pageSlideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(30px);
    opacity: 0;
  }
}

@keyframes pageSlideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-30px);
    opacity: 0;
  }
}

@keyframes pageSlideInRight {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pageSlideInLeft {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pageShadowSubtle {
  0% {
    box-shadow: 0 0 15px #0000001a;
  }

  50% {
    box-shadow: 0 0 20px #0003;
  }

  100% {
    box-shadow: 0 0 15px #0000001a;
  }
}

.split-layout.page-flipping-next {
  animation: pageSlideOutLeft .2s ease-out forwards;
  position: relative;
  pointer-events: none;
}

.split-layout.page-flipping-prev {
  animation: pageSlideOutRight .2s ease-out forwards;
  position: relative;
  pointer-events: none;
}

.split-layout.page-entering-next {
  animation: pageSlideInRight .2s ease-in forwards;
  position: relative;
}

.split-layout.page-entering-prev {
  animation: pageSlideInLeft .2s ease-in forwards;
  position: relative;
}

.stacked-layout.page-sliding-next {
  animation: slideOutLeft .2s ease-out forwards;
  pointer-events: none;
}

.stacked-layout.page-sliding-prev {
  animation: slideOutRight .2s ease-out forwards;
  pointer-events: none;
}

.stacked-layout.page-sliding-in-next {
  animation: slideInLeft .2s ease-in forwards;
}

.stacked-layout.page-sliding-in-prev {
  animation: slideInRight .2s ease-in forwards;
}

.start-reading-animation {
  animation: pageSlideOutLeft .8s ease-in-out forwards;
  transform-origin: left center;
}

@keyframes pageCornerFold {
  0% {
    transform: skewY(0);
  }

  25% {
    transform: skewY(-15deg);
  }

  75% {
    transform: skewY(-15deg);
  }

  100% {
    transform: skewY(0);
  }
}

@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }

  20% {
    opacity: .9;
  }

  80% {
    opacity: .9;
  }

  100% {
    opacity: 0;
  }
}

.navigation-hints-container {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  inset: 0;
}

.navigation-hint {
  position: absolute;
  z-index: 25;
  animation: pageFadeIn 6s ease-in-out forwards;
  pointer-events: none;
}

.navigation-hint.right-corner {
  background-color: var(--book-bg, #f7f4e9);
  transform-origin: top right;
  animation: pageFadeIn 6s ease-in-out forwards, pageCornerFold 6s ease-in-out forwards;
  border-bottom-left-radius: 8px;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  box-shadow: -2px 2px 5px #0003;
}

.navigation-hint.left-corner {
  background-color: var(--book-bg, #f7f4e9);
  transform-origin: top left;
  animation: pageFadeIn 6s ease-in-out forwards, pageCornerFold 6s ease-in-out forwards;
  border-bottom-right-radius: 8px;
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
  box-shadow: 2px 2px 5px #0003;
}

.navigation-hint.arrow {
  display: flex;
  flex-direction: column;
  align-items:  center;
  gap: 16px;
  width: 100%;
  bottom: 50px;
}

.navigation-hint .hint-content {
  text-align: center;
  color: var(--color, #4b5563);
  display: flex;
  background-color: #ffffffe6;
  border-radius: 24px;
  flex-direction: column;
  align-items:  center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  box-shadow: 0 2px 10px #0000001a;
}

.navigation-hint .fullscreen-hint {
  text-align: center;
  color: var(--color, #4b5563);
  display: flex;
  background-color: #ffffffe6;
  border-radius: 24px;
  flex-direction: column;
  align-items:  center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 14px;
  box-shadow: 0 2px 10px #0000001a;
}

.navigation-hint.arrow span {
  white-space: nowrap;
  font-family: serif;
}

.navigation-hint.arrow svg {
  color: var(--accent-color, #8b5cf6);
  width: 30px;
  height: 20px;
}

@media (max-width: 768px) {
  .navigation-hint.arrow {
    bottom: 70px;
  }

  .navigation-hint .hint-content, .navigation-hint .fullscreen-hint {
    padding: 6px 12px;
    font-size: 12px;
  }
}

.fullscreen-mode .navigation-hints-container {
  top: 50px;
  bottom: 50px;
}

.image-placeholder {
  display: flex;
  background-color: #00000008;
  border: 1px dashed #0003;
  border-radius: .5rem;
  justify-content: center;
  align-items:  center;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.fancy-button {
  background-color: var(--button-bg, #8b5cf6);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  border: none;
  border-radius: .375rem;
  align-items:  center;
  padding: .75rem 1.5rem;
  transition: all .2s;
  font-weight: 500;
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
}

.fancy-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 10px -1px #0000001a, 0 3px 6px -1px #0000000f;
}

.side-nav-button {
  transition: opacity .2s, transform .2s;
}

.side-nav-button:hover {
  transform: translateY(-50%)scale(1.1);
}

@media (max-width: 768px) {
  .side-nav-button {
    display: none !important;
  }
}

@media (min-width: 1440px) {
  .side-nav-button {
    width: 50px !important;
    height: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-nav-button, .fancy-button {
    transition: none;
  }

  .side-nav-button:hover {
    transform: translateY(-50%);
  }

  .fancy-button:hover {
    transform: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .fullscreen-mode .split-layout {
    display: flex !important;
    aspect-ratio: 16 / 9 !important;
    flex-direction: row !important;
    width: 96% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
  }

  .fullscreen-mode .split-layout .left-page, .fullscreen-mode .split-layout .right-page {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 50% !important;
    justify-content: center !important;
    width: 50% !important;
  }

  .fullscreen-mode .split-layout .left-page {
    padding-right: 1rem !important;
  }

  .fullscreen-mode .split-layout .right-page {
    padding-left: 1rem !important;
  }

  .fullscreen-mode .split-layout .right-page img {
    max-width: 95% !important;
    max-height: 55vh !important;
  }
}

@media (min-width: 1366px) {
  .split-layout {
    aspect-ratio: 16 / 9 !important;
    max-width: 1500px !important;
    min-height: 500px !important;
    max-height: calc(100vh - 8rem) !important;
    margin: 0 auto !important;
  }

  .split-layout .left-page, .split-layout .right-page {
    justify-content: center !important;
    padding: 3rem !important;
  }

  .fullscreen-mode .split-layout {
    max-width: 90% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 7rem) !important;
    padding: 0 !important;
  }

  .fullscreen-mode .split-layout .left-page, .fullscreen-mode .split-layout .right-page {
    min-height: 0 !important;
    max-height: calc(100vh - 7rem) !important;
  }

  .fullscreen-mode .split-layout .right-page img {
    max-width: 100% !important;
    max-height: 60vh !important;
  }
}

@supports (-webkit-touch-callout: none) {
  .fullscreen-mode .split-layout {
    display: flex !important;
    flex-direction: row !important;
    width: 96% !important;
    height: calc(100% - 8rem) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 8rem) !important;
    margin: 0 auto !important;
    max-width: 1800px !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
  }

  .fullscreen-mode .split-layout .left-page, .fullscreen-mode .split-layout .right-page {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    overflow: hidden !important;
    justify-content: center !important;
  }

  .fullscreen-mode .split-layout .left-page > div {
    flex: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .fullscreen-mode .split-layout .right-page img {
    max-height: 55vh !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
  }

  @media (orientation: landscape) {
    .fullscreen-mode .split-layout {
      padding-top: 1rem !important;
      aspect-ratio: 16 / 9 !important;
    }

    .fullscreen-mode .split-layout .left-page, .fullscreen-mode .split-layout .right-page {
      padding: 1rem 2rem !important;
      justify-content: center !important;
    }

    .fullscreen-mode .split-layout .right-page img {
      max-height: 50vh !important;
    }
  }
}

.fullscreen-mode .stacked-layout {
  display: block !important;
  position: relative !important;
  max-width: 800px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding-bottom: 2rem !important;
}

.fullscreen-mode .stacked-layout > div {
  display: block !important;
  position: relative !important;
}

.fullscreen-mode .stacked-layout .scene-image {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 50vh !important;
  margin: 0 auto 1.5rem !important;
}

@supports (-webkit-touch-callout: none) {
  .fullscreen-mode .stacked-layout {
    max-width: 90% !important;
    padding-bottom: 4rem !important;
  }

  .fullscreen-mode .stacked-layout > div {
    padding-top: 3rem !important;
  }

  .fullscreen-mode .stacked-layout .scene-image {
    max-height: 40vh !important;
  }
}

.stacked-layout {
  display: block !important;
  position: relative !important;
}

.stacked-layout > div {
  display: block !important;
  position: relative !important;
  padding-top: 2.5rem !important;
  padding-bottom: 2rem !important;
}

@media (max-width: 767px) {
  .stacked-layout > div {
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }
}

@supports (-webkit-touch-callout: none) {
  .stacked-layout {
    display: block !important;
    position: relative !important;
    margin-top: 0 !important;
    top: 0 !important;
  }

  .stacked-layout h2 {
    margin-top: 0 !important;
    position: relative !important;
    display: block !important;
  }

  .stacked-layout > div {
    display: block !important;
    position: relative !important;
    padding-top: 2.5rem !important;
    overflow: visible !important;
  }

  .fullscreen-mode .stacked-layout {
    margin-top: 1rem !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
  }

  .fullscreen-mode .stacked-layout > div {
    margin-top: 0 !important;
    padding-top: 3rem !important;
    position: relative !important;
    display: block !important;
  }

  .fullscreen-mode .stacked-layout img, .fullscreen-mode .scene-image {
    position: relative !important;
    margin-top: 1rem !important;
  }

  .fullscreen-mode .book-content-container {
    display: block !important;
    position: relative !important;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-30%);
    opacity: 0;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(30%);
    opacity: 0;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(30%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(-30%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.image-loaded {
  transition: opacity .3s ease-in-out;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.fullscreen-mode .split-layout .right-page img {
  display: block !important;
}

.right-page-image-container {
  display: flex !important;
  justify-content: center !important;
  align-items:  center !important;
  width: 100% !important;
  height: 100% !important;
}

.fullscreen-mode .split-layout .right-page .right-page-image-container {
  display: flex !important;
  justify-content: center !important;
  align-items:  center !important;
}

.early-reader-text {
  font-size: 1.1em;
  line-height: 1.9;
}

.early-reader-text > div {
  position: relative;
  margin-bottom: 1.5rem;
  transition: all .2s;
}

.early-reader-text > div:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px #0000001a;
}

.early-reader-text > div:before {
  content: "📖";
  position: absolute;
  opacity: .6;
  font-size: .8em;
  top: .5rem;
  left: -2rem;
}

.beginner-reader-text {
  font-size: 1.05em;
  line-height: 1.8;
}

.beginner-reader-text > div {
  position: relative;
  overflow: hidden;
  transition: all .2s;
}

.beginner-reader-text > div:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #00000014;
}

.beginner-reader-text > div:before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #0000, #fff6, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s;
  top: 0;
  left: -100%;
}

.beginner-reader-text > div:hover:before {
  left: 100%;
}

.intermediate-reader-text {
  font-size: 1em;
  line-height: 1.7;
}

.intermediate-reader-text p {
  position: relative;
  transition: all .2s;
}

.intermediate-reader-text p:hover {
  border-left-width: 3px;
  border-left-color: #3b82f666;
  padding-left: .75rem;
}

.intermediate-reader-text p:before {
  content: "•";
  position: absolute;
  color: #3b82f680;
  opacity: 0;
  transition: opacity .2s;
  font-weight: bold;
  left: -1rem;
}

.intermediate-reader-text p:hover:before {
  opacity: 1;
}

.advanced-reader-text {
  font-size: 1em;
  line-height: 1.6;
}

.advanced-reader-text p {
  text-align: justify;
  hyphens: auto;
  margin-bottom: 1.2em;
}

.advanced-reader-text p:first-of-type {
  text-indent: 1.5em;
}

@media (max-width: 768px) {
  .early-reader-text {
    font-size: 1.05em;
  }

  .early-reader-text > div {
    margin-bottom: 1.25rem;
    padding-left: .75rem;
  }

  .early-reader-text > div:before {
    font-size: .7em;
    left: -1.5rem;
  }

  .beginner-reader-text {
    font-size: 1em;
  }

  .beginner-reader-text > div {
    margin-bottom: 1rem;
    padding: .5rem;
  }

  .intermediate-reader-text {
    font-size: .95em;
  }

  .intermediate-reader-text p {
    padding-left: .25rem;
  }
}

.fullscreen-mode .early-reader-text > div {
  margin-bottom: 1.75rem;
  font-size: 1.15em;
}

.fullscreen-mode .beginner-reader-text > div {
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.fullscreen-mode .intermediate-reader-text p {
  margin-bottom: 1.25rem;
}

@media print {
  .early-reader-text > div, .beginner-reader-text > div, .intermediate-reader-text p {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .early-reader-text > div:before, .beginner-reader-text > div:before, .intermediate-reader-text p:before {
    display: none;
  }
}

@media (prefers-contrast: high) {
  .early-reader-text > div {
    border-left-width: 4px;
    border-left-color: currentColor;
  }

  .beginner-reader-text > div {
    background-color: #0000;
    border: 2px solid;
  }

  .intermediate-reader-text p {
    border-left-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .early-reader-text > div, .beginner-reader-text > div, .intermediate-reader-text p {
    transition: none;
  }

  .early-reader-text > div:hover, .beginner-reader-text > div:hover, .intermediate-reader-text p:hover {
    transform: none;
  }

  .beginner-reader-text > div:before {
    transition: none;
  }
}