/* The loupe (the M key, switched on in the controls panel): a lens that follows the cursor and shows a live, enlarged copy of the page.
   Inside, from the back: the wall, a copy of the text under the books, the zoomed shelf (a canvas), a copy of the buttons over it. */
#loupe {
  position: fixed; left: 0; top: 0; z-index: 1000; display: none; overflow: hidden; pointer-events: none;
  border-radius: 12px; box-sizing: border-box; /* the same corners as the bubble windows */ background: var(--page); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 10px 30px rgba(0, 0, 0, var(--shadow, 0.2));
}
#loupe.on { display: block; }
html.loupe-on, html.loupe-on * { cursor: none !important; }

/* The glass: a shaded rim like the thickness of the lens, and a faint tint. The numbers come from the --rim and --tint variables that loupe.js sets
   from the tuning values. */
#loupe .lp-glass {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: rgba(190, 215, 255, var(--tint, 0.04));
  box-shadow: inset 0 0 calc(var(--rim, 18) * 1px) rgba(0, 0, 0, 0.3);
}
#loupe .lp-refract { position: absolute; background: var(--page); } /* the filtered layer; larger than the lens so the rim can look past its edge */
#loupe .lp-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; }
#loupe .lp-flow { position: absolute; left: 0; top: 0; display: flow-root; }
#loupe .lp-canvas { position: absolute; left: 0; top: 0; display: block; }
/* The copies are only pictures: nothing in them can be pressed, and the things that fade in on the page are shown as they are. */
#loupe .lp-layer *, #loupe .lp-flow * { pointer-events: none !important; animation: none !important; }