/* ================= stage ================= */
  #stage{
    position:fixed; inset:0; background:var(--canvas);
    display:flex; align-items:center; justify-content:center; gap:var(--s-md);
    padding:64px var(--s-xl) 68px; overflow:auto; overscroll-behavior:contain;
  }
  body.hide-cursor{cursor:none}
  /* With the laser on, the red dot is the pointer — leaving the arrow up gives
     the audience two of them. Scoped to the page and the paging zones: over the
     toolbar you still need to see what you are about to click. Drawing keeps
     its crosshair, which is doing a different job. */
  body.laser #stage, body.laser .zone{cursor:none}
  #stage.zoomed{cursor:grab}
  #stage.zoomed.dragging{cursor:grabbing}
  #stage.marking{cursor:crosshair}

  .frame{
    position:relative; margin:auto; line-height:0; flex:0 0 auto; background:#fff;
    border-radius:var(--r-lg); overflow:hidden; box-shadow:0 0 0 1px var(--hairline);
  }
  .frame canvas{display:block}
  .layers{position:relative; line-height:0; z-index:2}
  #txCanvas{position:absolute; inset:0; z-index:1; display:none; pointer-events:none}
  #hlCanvas{position:absolute; inset:0; pointer-events:none}
  #inkCanvas{position:absolute; inset:0; touch-action:none}
  body.drawing #inkCanvas{cursor:crosshair}
  #cmpFrame{display:none; position:relative}
  body.compare #cmpFrame{display:block}
  .pin-tag{
    position:absolute; top:-24px; left:0; font-family:var(--mono); font-size:12px; font-weight:600;
    letter-spacing:1.5px; color:var(--blue); text-transform:uppercase;
  }

  .zone{position:fixed; top:64px; bottom:68px; width:22%; z-index:5; border:0;
    background:transparent; cursor:pointer; opacity:0}
  .zone.prev{left:0} .zone.next{right:0}
  body.no-doc .zone, body.drawing .zone, body.marking-mode .zone{display:none}