/* A decorative reading lens; the original text remains the accessible source. */
.station-intro h1,
.station-intro > p {
  pointer-events: auto;
}

.lunar-reading-lens {
  display: none;
  position: fixed;
  z-index: 2147483646;
  left: var(--lens-x, -300px);
  top: var(--lens-y, -300px);
  width: var(--lens-size, 190px);
  height: var(--lens-size, 190px);
  margin: 0;
  padding: 0;
  border: 1px solid #e1ebe9a8;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: #0c151df7;
  box-shadow:
    0 16px 44px #0008,
    0 2px 9px #0008,
    0 0 0 3px #d9e6e511,
    0 0 0 5px #d9e6e507,
    inset 0 0 0 4px #0c151dbf;
  contain: layout paint style;
  transition: opacity .12s ease, visibility 0s linear .12s;
}

.lunar-reading-lens::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 4px;
  border: 1px solid #d6e6e421;
  border-radius: inherit;
  box-shadow: inset 0 5px 14px #cce9e408, inset 0 -5px 15px #01060a2e;
  pointer-events: none;
}

.lunar-reading-lens::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fbf5e0, transparent);
  opacity: .9;
  pointer-events: none;
}

.lunar-reading-lens-content {
  position: absolute;
  z-index: 1;
  inset: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: #edf1ed;
  background: transparent;
  text-shadow: none;
  transform: scale(1.5);
  transform-origin: 0 0;
  pointer-events: none !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lunar-reading-lens-content > :first-child {
  margin: 0;
}

.lunar-reading-lens:not(.is-visible) {
  display: none;
}

.lunar-reading-lens-content *,
.lunar-reading-lens-content *::before,
.lunar-reading-lens-content *::after {
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
  caret-color: transparent;
}

.lunar-reading-lens-rim {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  margin: 0;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
  color: #d2e1df;
  font: 8px/1 "Courier New", monospace;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 4px #000;
}

.lunar-reading-lens-rim::before,
.lunar-reading-lens-rim::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 1px;
  background: #e0ede58c;
  box-shadow: 0 -2px 3px #e0ede511;
}

.lunar-reading-lens-rim::before {
  left: 1px;
}

.lunar-reading-lens-rim::after {
  right: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .lunar-reading-lens {
    display: block;
  }

  .lunar-reading-lens.is-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity .12s ease, visibility 0s;
  }
}

body.lunar-paused .lunar-reading-lens {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .lunar-reading-lens,
  .lunar-reading-lens.is-visible {
    transition: none !important;
  }
}

@media (forced-colors: active), print {
  .lunar-reading-lens {
    display: none !important;
  }
}