/* =============================================================
   CINEMA MODE (ZOOM SCREEN) — full-bleed single-slide overlay.

   Everything here is scoped under .zoom-screen and prefixed `zoom-`, so the
   dark palette never leaks into the normal (light) viewer that sits behind it.

   Layout: JS drives --zoom-slide-w/h and the two bar offsets so that, while
   the slide is wide enough, the top and bottom bars sit OUTSIDE the slide
   instead of over it. The values below are the pre-JS first paint only.
   ============================================================= */

.zoom-screen {
  --zoom-bar-h: 50px;
  --zoom-ar-w: 16;
  --zoom-ar-h: 9;
  --zoom-btn-size: 34px;
  --zoom-icon-size: 20px;
  --zoom-edge-pad: 14px;
  --zoom-arrow-gap: 34px;

  /* Palette. Dark is the default — it is what a third-party embed gets, where
     the viewer supplies its own surroundings. `.zoom-light` below overrides
     only these, so the rules further down never need a second copy. */
  --zoom-bg: #1a1a1a;
  --zoom-bg-fs: #000;
  --zoom-fg: #828282;
  --zoom-fg-strong: #fff;
  --zoom-hover: rgba(255, 255, 255, 0.14);
  --zoom-active: rgba(255, 255, 255, 0.18);
  --zoom-panel: rgba(28, 28, 30, 0.77);
  --zoom-panel-blur: none;
  --zoom-panel-fg: rgba(255, 255, 255, 0.95);
  --zoom-panel-fg-dim: rgba(255, 255, 255, 0.35);
  --zoom-border: rgba(255, 255, 255, 0.14);
  --zoom-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.28);
  --zoom-scroll-thumb: rgba(255, 255, 255, 0.28);
  --zoom-scroll-thumb-hover: rgba(255, 255, 255, 0.42);
  --zoom-tip-bg: rgba(28, 28, 30, 0.88);
  --zoom-tip-fg: rgba(255, 255, 255, 0.95);
  --zoom-tip-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  /* Lifts icons and labels off a dark slide; pointless on a light ground. */
  --zoom-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  --zoom-icon-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  /* Hover glow over the control bar: a white wash above, a dark one below. */
  --zoom-glow-top: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.14) 25%,
    rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0) 80%);
  --zoom-glow-bottom: linear-gradient(to top,
    rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.18) 25%,
    rgba(0, 0, 0, 0.06) 55%, rgba(0, 0, 0, 0) 80%);
  --zoom-glow-top-idle: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%);
  --zoom-glow-bottom-idle: linear-gradient(to top,
    rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 55%);

  --zoom-slide-w: min(100vw, calc(100vh * var(--zoom-ar-w) / var(--zoom-ar-h)));
  --zoom-slide-h: min(100vh, calc(100vw * var(--zoom-ar-h) / var(--zoom-ar-w)));
  --zoom-top-bar-y: max(
    calc(50vh - (50vw * var(--zoom-ar-h) / var(--zoom-ar-w)) - var(--zoom-bar-h)),
    0px
  );
  --zoom-bottom-bar-y: min(
    calc(50vh + (50vw * var(--zoom-ar-h) / var(--zoom-ar-w))),
    calc(100vh - var(--zoom-bar-h))
  );

  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--zoom-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.zoom-screen[hidden] { display: none; }

/* Scoped border-box reset. The prototype relied on a global `* { box-sizing }`
   that this overlay cannot assume, and .zoom-topbar sets both an explicit
   width and horizontal padding — without this it renders 2*--zoom-edge-pad
   wider than the slide and overflows the viewport on narrow screens. */
.zoom-screen *,
.zoom-screen *::before,
.zoom-screen *::after { box-sizing: border-box; }

.zoom-screen-viewer {
  position: absolute;
  inset: 0;
  outline: none;
  cursor: default;
  background: var(--zoom-bg);
}

/* Native fullscreen goes fully black — the grey would read as letterboxing. */
.zoom-screen-viewer:fullscreen,
.zoom-screen-viewer:-webkit-full-screen { background: var(--zoom-bg-fs); }

/* ── Slide ──────────────────────────────────────────────── */

.zoom-screen-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--zoom-slide-w);
  height: var(--zoom-slide-h);
}

.zoom-screen-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* clicks fall through to the nav zones */
}

/* ── Prev / next click zones ────────────────────────────── */

.zoom-nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 10;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}
.zoom-nav-zone.zoom-nav-prev { left: 0; }
.zoom-nav-zone.zoom-nav-next { right: 0; }
.zoom-nav-zone:disabled { cursor: default; pointer-events: none; }

/* ── Topbar ─────────────────────────────────────────────── */

/* Both bars share their geometry; only the vertical anchor differs. */
.zoom-topbar,
.zoom-controls {
  position: fixed;
  height: var(--zoom-bar-h);
  width: var(--zoom-slide-w);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

.zoom-topbar {
  top: var(--zoom-top-bar-y);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--zoom-edge-pad);
  background: rgba(84, 84, 88, 0.62);
  backdrop-filter: blur(2px) saturate(105%);
  -webkit-backdrop-filter: blur(2px) saturate(105%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Transparent to pointers so the nav zones keep the full slide area; only
     the logo link opts back in. */
  pointer-events: none;
  user-select: none;
}

/* Wraps avatar + title + subtitle. Inert until cinema.js supplies an href,
   so a deck with no public page (private, or opened from the ZIP) shows the
   same content without a dead link. */
.zoom-topbar-link {
  flex: 1 1 auto;
  min-width: 0; /* lets the title ellipsis, same as .zoom-topbar-text */
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  pointer-events: none;
  border-radius: 4px;
  outline: none;
}
.zoom-topbar-link[href] {
  pointer-events: auto;
  cursor: pointer;
}
.zoom-topbar-link[href]:hover .zoom-topbar-title,
.zoom-topbar-link[href]:hover .zoom-topbar-sub {
  color: #e8e8e8;
}
.zoom-topbar-link[href]:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.zoom-topbar-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  background: #4c88c8; /* replaced by the generated gradient in cinema.js */
}
.zoom-topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zoom-topbar-text {
  flex: 1 1 auto;
  min-width: 0; /* required for the ellipsis below */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.zoom-topbar-title,
.zoom-topbar-sub {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
               "Noto Sans JP", "Meiryo", sans-serif;
  font-weight: 700;
  color: #c4c4c4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 0, 0, 0.32);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.zoom-topbar-title { font-size: 14px; letter-spacing: 0.01em; }
.zoom-topbar-sub { font-size: 11px; letter-spacing: 0.02em; color: #b6b6b6; }
/* The subtitle is display:flex'd by its parent, which would otherwise beat
   the `hidden` attribute. */
.zoom-topbar-sub[hidden] { display: none; }

.zoom-topbar-logo-link {
  flex: none;
  display: block;
  line-height: 0;
  pointer-events: auto; /* the one interactive part of a non-interactive bar */
  cursor: pointer;
  border-radius: 3px;
  outline: none;
}
.zoom-topbar-logo-link:hover .zoom-topbar-logo { opacity: 0.6; }
.zoom-topbar-logo-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.zoom-topbar-logo {
  width: 146px;
  height: 39px;
  display: block;
  -webkit-user-drag: none;
  opacity: 0.33;
  transition: opacity 0.15s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.zoom-topbar.zoom-compact { gap: 9px; }
.zoom-topbar.zoom-compact .zoom-topbar-title { font-size: 13px; }
.zoom-topbar.zoom-compact .zoom-topbar-sub { font-size: 10px; }

/* In native fullscreen the topbar recedes into the black and only returns
   while the pointer is inside its band (hit-tested in JS, since the bar is
   pointer-events:none). */
.zoom-screen.zoom-fs .zoom-topbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.zoom-screen.zoom-fs .zoom-topbar-link,
.zoom-screen.zoom-fs .zoom-topbar-logo-link {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.zoom-screen.zoom-fs.zoom-topbar-peek .zoom-topbar-link,
.zoom-screen.zoom-fs.zoom-topbar-peek .zoom-topbar-logo-link { opacity: 1; }
.zoom-screen.zoom-fs.zoom-topbar-peek .zoom-topbar-link[href] {
  pointer-events: auto;
}
.zoom-screen.zoom-fs.zoom-topbar-peek .zoom-topbar-logo-link {
  pointer-events: auto;
}

/* ── Control bar ────────────────────────────────────────── */

.zoom-controls {
  top: var(--zoom-bottom-bar-y);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* Plain :hover is safe here only because the layout engine keeps the bar off
   the slide while the slide is wide enough. The previous build could not use
   it — with the bar overlapping, the pointer always sat over the viewer in
   in-frame mode, so the bar pinned itself over the slide text and never faded.
   If the layout engine is ever reverted, this has to revert with it. */
.zoom-screen-viewer:hover .zoom-controls,
.zoom-screen-viewer:focus-within .zoom-controls { opacity: 1; }

.zoom-bg-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: 7px;
  background: var(--zoom-glow-top-idle), var(--zoom-glow-bottom-idle);
  transition: background 0.22s ease;
  pointer-events: none;
}
.zoom-bg-left { left: 0; }
.zoom-bg-right { right: 0; }

.zoom-controls.zoom-hover-left .zoom-bg-left,
.zoom-controls.zoom-hover-right .zoom-bg-right {
  background: var(--zoom-glow-top), var(--zoom-glow-bottom);
}

.zoom-ctrl-btn {
  position: relative;
  background: transparent;
  border: none;
  color: var(--zoom-fg);
  width: var(--zoom-btn-size);
  height: var(--zoom-btn-size);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  padding: 0;
  pointer-events: auto;
}
.zoom-ctrl-btn:hover {
  background: var(--zoom-hover);
  color: var(--zoom-fg-strong);
}
.zoom-ctrl-btn:active { transform: scale(0.94); }
.zoom-ctrl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.zoom-ctrl-btn:disabled:hover { background: transparent; }

/* The centre arrows respond to the nav-zone hover instead of their own, so a
   pointer anywhere on that half lights the matching arrow. Suppressing their
   own background keeps that from reading as two separate hover states. */
#zoomBtnPrev:hover,
#zoomBtnNext:hover { background: transparent; }
.zoom-controls.zoom-hover-left #zoomBtnPrev:not(:disabled),
.zoom-controls.zoom-hover-right #zoomBtnNext:not(:disabled) {
  color: var(--zoom-fg-strong);
  background: transparent;
}

.zoom-ctrl-btn svg {
  width: var(--zoom-icon-size);
  height: var(--zoom-icon-size);
  display: block;
  overflow: visible;
  filter: var(--zoom-icon-shadow);
}

/* Per-icon optical sizing: the source artwork does not have a common visual
   weight at one nominal size. */
#zoomBtnPrev svg,
#zoomBtnNext svg { width: 25.29px; height: 25.29px; }
#zoomBtnNormalView svg { width: 21px; height: 17.54px; overflow: visible; }
#zoomBtnFs svg { width: 19px; height: 19px; stroke-width: 1.23; }
#zoomBtnFs svg.zoom-is-exit { stroke-width: 1.39; }
.zoom-menu-item svg#zoomMenuIconFs { stroke-width: 1.17; }
.zoom-menu-item svg#zoomMenuIconFs.zoom-is-exit { stroke-width: 1.32; }

.zoom-ctrl-first,
.zoom-ctrl-last,
.zoom-ctrl-hamburger {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.zoom-ctrl-first { left: var(--zoom-edge-pad); }
.zoom-ctrl-last,
.zoom-ctrl-hamburger { right: var(--zoom-edge-pad); }
.zoom-ctrl-first:active,
.zoom-ctrl-last:active,
.zoom-ctrl-hamburger:active { transform: translateY(-50%) scale(0.94); }
.zoom-ctrl-hamburger { display: none; }

.zoom-center-arrows {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--zoom-arrow-gap);
  z-index: 2;
  pointer-events: none;
}

.zoom-right-group {
  position: absolute;
  left: calc(75% + 8px);
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
  pointer-events: auto;
}
.zoom-right-group #zoomBtnNormalView { margin-left: -7px; }
.zoom-right-group #zoomBtnFs { margin-left: 2px; }

.zoom-indicator {
  color: var(--zoom-fg);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  text-shadow: var(--zoom-text-shadow);
  min-width: 60px;
  text-align: center;
  user-select: none;
  padding: 4px 6px;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  pointer-events: auto;
  transition: background 0.15s ease, color 0.15s ease;
}
.zoom-indicator:hover,
.zoom-indicator.zoom-open {
  background: var(--zoom-hover);
  color: var(--zoom-fg-strong);
}

.zoom-indicator-compact {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
}

/* Compact: drop the edge buttons and the right group for a hamburger. */
.zoom-controls.zoom-compact .zoom-ctrl-first,
.zoom-controls.zoom-compact .zoom-ctrl-last,
.zoom-controls.zoom-compact .zoom-right-group { display: none; }
.zoom-controls.zoom-compact .zoom-ctrl-hamburger { display: inline-flex; }
.zoom-controls.zoom-compact .zoom-indicator-compact { display: block; }

/* ── Popups ─────────────────────────────────────────────── */

.zoom-menu-popup,
.zoom-slidelist-popup {
  position: absolute;
  bottom: calc(var(--zoom-bar-h) + 6px);
  background: var(--zoom-panel);
  backdrop-filter: var(--zoom-panel-blur);
  -webkit-backdrop-filter: var(--zoom-panel-blur);
  border: 1px solid var(--zoom-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--zoom-shadow);
  z-index: 30;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.zoom-menu-popup {
  right: var(--zoom-edge-pad);
  min-width: 200px;
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom right;
}
.zoom-menu-popup.zoom-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.zoom-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--zoom-panel-fg);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  text-shadow: var(--zoom-text-shadow);
}
.zoom-menu-item:hover { background: var(--zoom-hover); }
.zoom-menu-item:disabled {
  color: var(--zoom-panel-fg-dim);
  cursor: not-allowed;
}
.zoom-menu-item:disabled:hover { background: transparent; }
.zoom-menu-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Page list. Anchored under whichever indicator is visible; cinema.js sets
   `left` and clamps max-height to the room above the bar. */
.zoom-slidelist-popup {
  left: calc(75% + 8px);
  transform: translate(-50%, 6px) scale(0.98);
  transform-origin: bottom center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Fits a 4-digit page number: 33px + 16px item padding + 12px own padding
     + 2px border + 6px scrollbar. */
  min-width: 69px;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--zoom-scroll-thumb) transparent;
}
.zoom-slidelist-popup.zoom-open {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.zoom-slidelist-popup::-webkit-scrollbar { width: 6px; }
.zoom-slidelist-popup::-webkit-scrollbar-track { background: transparent; }
.zoom-slidelist-popup::-webkit-scrollbar-thumb {
  background: var(--zoom-scroll-thumb);
  border-radius: 3px;
}
.zoom-slidelist-popup::-webkit-scrollbar-thumb:hover {
  background: var(--zoom-scroll-thumb-hover);
}

.zoom-slidelist-item {
  display: block;
  padding: 6px 8px;
  background: transparent;
  border: none;
  color: var(--zoom-panel-fg);
  font-size: 13px;
  font-family: inherit;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--zoom-text-shadow);
  flex: none;
}
.zoom-slidelist-item:hover {
  background: var(--zoom-hover);
  color: var(--zoom-fg-strong);
}
.zoom-slidelist-item.zoom-active {
  background: var(--zoom-active);
  color: var(--zoom-fg-strong);
}

/* ── Tooltips ───────────────────────────────────────────── */

/* The native `title` tooltip takes about a second to appear, which is too slow
   for a bar that fades on idle. */
.zoom-ctrl-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--zoom-tip-bg);
  border: 1px solid var(--zoom-border);
  color: var(--zoom-tip-fg);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 5px 7px;
  border-radius: 5px;
  box-shadow: var(--zoom-tip-shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
/* Self-limiting: 0.5s delay, 0.15s in, 7s visible, 0.2s out — so a pointer
   parked on a button during a presentation does not leave the label up. */
.zoom-ctrl-btn[data-tip]:hover::after,
.zoom-ctrl-btn[data-tip]:focus-visible::after {
  animation: zoomTipAutoHide 7.85s ease forwards;
}
@keyframes zoomTipAutoHide {
  0%, 6.37% { opacity: 0; }
  8.28%, 95.54% { opacity: 1; }
  100% { opacity: 0; }
}
.zoom-ctrl-btn[data-tip]:disabled::after { content: none; }

/* Pull the end buttons' tooltips inward so they do not overflow the bar. */
.zoom-ctrl-first[data-tip]::after { left: 0; transform: none; }
.zoom-ctrl-last[data-tip]::after,
.zoom-ctrl-hamburger[data-tip]::after {
  left: auto;
  right: 0;
  transform: none;
}

/* =============================================================
   LIGHT VARIANT — the viewer embedded in our own share page.

   The share page is light, and a black band floating in the middle of it read
   as a foreign object. It also already shows the author (avatar, name,
   company) and our logo in its own chrome, so the topbar here was duplicating
   what the surrounding page says — it is dropped rather than recoloured.

   A third-party embed keeps the dark default: there the viewer supplies its
   own surroundings, and the topbar is the only place the deck is attributed.

   Only tokens are overridden below; every rule above is shared.
   ============================================================= */

.zoom-screen.zoom-light {
  --zoom-bg: #f0f2f6;
  --zoom-bg-fs: #f0f2f6;
  --zoom-fg: #9aa1ad;
  --zoom-fg-strong: #5b6270;
  --zoom-hover: rgba(15, 23, 42, 0.045);
  --zoom-active: rgba(15, 23, 42, 0.07);
  --zoom-panel: rgba(255, 255, 255, 0.9);
  --zoom-panel-blur: blur(8px) saturate(120%);
  --zoom-panel-fg: #6b7280;
  --zoom-panel-fg-dim: rgba(107, 114, 128, 0.38);
  --zoom-border: rgba(15, 23, 42, 0.07);
  --zoom-shadow: 0 8px 22px rgba(15, 23, 42, 0.09),
    0 2px 5px rgba(15, 23, 42, 0.05);
  --zoom-scroll-thumb: rgba(15, 23, 42, 0.18);
  --zoom-scroll-thumb-hover: rgba(15, 23, 42, 0.3);
  --zoom-tip-bg: rgba(90, 98, 112, 0.9);
  --zoom-tip-fg: rgba(255, 255, 255, 0.96);
  --zoom-tip-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
  /* Nothing to lift off: text sits on a light ground, not on the slide. */
  --zoom-text-shadow: none;
  --zoom-icon-shadow: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45));
  /* One wash instead of two — the white half would be invisible here. */
  --zoom-glow-top: none;
  --zoom-glow-bottom: linear-gradient(to top,
    rgba(15, 23, 42, 0.085) 0%, rgba(15, 23, 42, 0.045) 30%,
    rgba(15, 23, 42, 0.013) 60%, rgba(15, 23, 42, 0) 85%);
  --zoom-glow-top-idle: none;
  --zoom-glow-bottom-idle: linear-gradient(to top,
    rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0) 60%);
}

/* No topbar, so the slide is centred in what is left above the control bar
   rather than in the viewport. cinema.js drives --zoom-slide-top. */
.zoom-screen.zoom-light .zoom-topbar { display: none; }

.zoom-screen.zoom-light .zoom-screen-frame {
  top: var(--zoom-slide-top);
  transform: translateX(-50%);
}

/* The panels are translucent over a light ground; a white-on-white slide
   needs the hairline to stay readable. */
.zoom-screen.zoom-light .zoom-slidelist-popup {
  background: rgba(255, 255, 255, 0.62);
}