.magnifier-layer {
  position: fixed;
  z-index: 2000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.paper-magnifier {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(120px, 13.5vw, 165px);
  aspect-ratio: 320 / 370;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  will-change: transform;
}

.paper-magnifier[data-dragging="true"] { cursor: grabbing; }

.magnifier-tether {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.magnifier-wool { filter: drop-shadow(.3px 1px 1px #65545f1c); }
.magnifier-pin { filter: drop-shadow(.3px .6px .5px #514b561f); }

.magnifier-eyelet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.magnifier-lens {
  position: absolute;
  left: 14.0625%;
  top: 11.081081%;
  width: 51.875%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--paper, #f7f4f4);
  isolation: isolate;
  pointer-events: none;
}

.magnifier-mirror {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}

.magnifier-lens::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(122deg, transparent 22%, #ffffff2e 27%, #ffffff5c 31%, transparent 40%, transparent 47%, #ffffff1c 50%, transparent 55%),
    radial-gradient(ellipse at 28% 15%, #ffffff6b 0, #ffffff14 27%, transparent 52%),
    radial-gradient(ellipse at 75% 90%, #b4d3dc42, transparent 48%),
    radial-gradient(circle, transparent 65%, #65879514 83%, #29455240 98%);
  box-shadow: inset 1px 1.5px 3px #263e4a47, inset -1.5px -2px 2.5px #eafaffb3;
}

.magnifier-glint {
  position: absolute;
  z-index: 3;
  left: 14.0625%;
  top: 11.081081%;
  width: 51.875%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.magnifier-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(.5px 1.5px 1px #65545f30) drop-shadow(2px 3px 3px #65545f1c);
}

.magnifier-hit-lens {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  cursor: inherit;
}

.magnifier-hit-lens {
  left: 10.3125%;
  top: 7.837838%;
  width: 59.375%;
  aspect-ratio: 1;
  border-radius: 50%;
}


.paper-magnifier:focus-visible:not([data-pointer-focus="true"]) .magnifier-hit-lens {
  outline: 2px solid #7a6a8d;
  outline-offset: 6px;
}

.magnifier-hint {
  position: absolute;
  top: 63%;
  left: -12px;
  width: 96px;
  color: #756b73;
  font: 16px/1.12 'Oooh Baby', cursive;
  text-align: center;
  transform: rotate(-8deg);
  pointer-events: none;
}

.magnifier-hint svg {
  display: block;
  width: 48px;
  height: 23px;
  margin: 0 0 1px 28px;
}

.paper-magnifier[data-used="true"] .magnifier-hint { display: none; }

.magnifier-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .paper-magnifier { width: 120px; }
  .magnifier-hint { font-size: 14px; left: -8px; width: 80px; }
}

@media print {
  .magnifier-layer { display: none !important; }
}