/* Click to enlarge (zoom/video-zoom.js). Colours follow the system setting; the guide's own themes override it below. */
.vz-back {
  --vz-card: #ffffff; --vz-fg: #1c2129; --vz-dim: #55606f; --vz-line: #d9dee6; --vz-accent: #0a5fb4;
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 14, 0.78); color: var(--vz-fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .vz-back { --vz-card: #1b2028; --vz-fg: #e7ebf2; --vz-dim: #a3adbb; --vz-line: #2d3440; --vz-accent: #5aa9ff; }
}
html.light .vz-back, html.rust .vz-back { --vz-card: #ffffff; --vz-fg: #1c2129; --vz-dim: #55606f; --vz-line: #d9dee6; --vz-accent: #0a5fb4; }
html.navy .vz-back, html.coal .vz-back, html.ayu .vz-back { --vz-card: #1b2028; --vz-fg: #e7ebf2; --vz-dim: #a3adbb; --vz-line: #2d3440; --vz-accent: #5aa9ff; }
.vz-back *, .vz-back *::before, .vz-back *::after { box-sizing: border-box; }
.vz-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.vz-box {
  position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 100vw; max-height: 100vh;
  background: var(--vz-card); border: 1px solid var(--vz-line); border-radius: 10px; padding: 12px 12px 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.vz-bar { display: flex; align-items: baseline; gap: 12px; padding-right: 104px; min-height: 32px; }
.vz-title { margin: 0; font-size: 16.8px; line-height: 1.3; font-weight: 650; color: var(--vz-fg); overflow-wrap: anywhere; }
.vz-count { margin-left: auto; font-size: 13.6px; color: var(--vz-dim); white-space: nowrap; }
.vz-stage { display: flex; align-items: center; gap: 8px; min-height: 0; }
.vz-holder { display: flex; justify-content: center; min-width: 0; flex: 1 1 auto; }
/* Never larger than the clip's own pixels (--vz-w), and no larger than the window leaves room for. */
.vz-video {
  display: block; background: #000; border-radius: 6px;
  width: min(var(--vz-w, 960px), calc(100vw - 128px), calc((100vh - 176px) * var(--vz-r, 1.7778)));
  aspect-ratio: var(--vz-ar, 16 / 9); height: auto; max-width: 100%;
}
.vz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5.6px; cursor: pointer;
  min-width: 44px; height: 44px; padding: 0 9.6px; border-radius: 999px;
  border: 1px solid var(--vz-line); background: var(--vz-card); color: var(--vz-fg); font: inherit; font-size: 14.4px;
}
.vz-btn:hover:not(:disabled) { border-color: var(--vz-accent); color: var(--vz-accent); }
.vz-btn:disabled { opacity: 0.35; cursor: default; }
.vz-btn:focus-visible, .vz-video:focus-visible, .vz-enlarge:focus-visible, .vz-ready:focus-visible { outline: 3px solid var(--vz-accent, #5aa9ff); outline-offset: 2px; }
.vz-close { position: absolute; top: 8px; right: 8px; height: 40px; }
.vz-note { margin: 0; color: var(--vz-dim); font-size: 14.4px; }
.vz-caption { margin: 0; color: var(--vz-dim); font-size: 14.4px; max-width: 70ch; max-height: 120px; overflow: auto; }
.vz-caption[hidden], .vz-note[hidden], .vz-btn[hidden] { display: none; }
@media (max-width: 640px) {
  .vz-box { width: 100vw; height: auto; border-radius: 0; border-left: 0; border-right: 0; padding: 8px 0 12px; gap: 6.4px; }
  .vz-bar, .vz-caption, .vz-note { padding-left: 12px; padding-right: 12px; }
  .vz-bar { padding-right: 96px; }
  .vz-stage { position: relative; gap: 0; }
  .vz-video { width: 100vw; max-width: 100vw; border-radius: 0; }
  .vz-prev, .vz-next { position: absolute; top: 8px; z-index: 1; opacity: 0.9; min-width: 40px; height: 40px; }
  .vz-prev { left: 6.4px; } .vz-next { right: 6.4px; }
  .vz-caption { max-height: 22vh; }
}
@media (max-height: 520px) and (min-width: 641px) {
  .vz-video { width: min(var(--vz-w, 960px), calc(100vw - 128px), calc((100vh - 104px) * var(--vz-r, 1.7778))); }
  .vz-caption { display: none; }
}
/* The cue on a What's new clip and the Enlarge button on a guide video. */
.vz-ready { cursor: zoom-in; }
.vz-cue {
  position: absolute; top: 8px; right: 8px; display: inline-flex; padding: 5.6px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.65); color: #fff; opacity: 0.8; pointer-events: none; transition: opacity 0.15s;
}
.vz-ready:hover .vz-cue, .vz-ready:focus-visible .vz-cue { opacity: 1; }
.vz-wrap { position: relative; display: block; width: 100%; max-width: 960px; }
.vz-wrap > video { display: block; }
.vz-enlarge {
  position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5.6px; cursor: pointer;
  padding: 4.8px 9.6px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: #fff; font: inherit; font-size: 13.6px; opacity: 0.85;
}
.vz-btn.vz-enlarge { min-width: 0; height: auto; }
.vz-enlarge .vz-btn-text { font-size: 13.6px; }
.vz-enlarge:hover { opacity: 1; }
.vz-enlarge svg { width: 16px; height: 16px; }
@media print { .vz-back, .vz-cue, .vz-enlarge { display: none; } }