/* ESHLON video player. video-player.js builds it around any <video data-player>; without the script the video
   keeps the browser's own controls. Neutral dark glass over the picture (it has to read over light and dark
   recordings alike), design-system type and radii, white progress. The bar leaves while the video plays and the
   pointer rests, and returns on movement, focus or pause. */
:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}
.vp{position:relative;overflow:hidden;color:#fff;font-family:'Eshlon Sans',sans-serif;-webkit-tap-highlight-color:transparent}
.vp video{display:block}
.vp-glass{border:1px solid #ffffff1f;background:#111111b3;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}

/* The whole picture is the play/pause target. */
.vp-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.vp-hit:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* Centre button: shown while paused; after a click it flashes the new state once. */
.vp-center{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.9);transition:opacity 250ms var(--ease-out,ease),transform 250ms var(--ease-out,ease)}
.vp-center svg{width:30px;height:30px}
.vp[data-state="paused"] .vp-center{opacity:1;transform:scale(1)}
.vp-center.is-flash{animation:vp-flash 420ms var(--ease-out,ease) both}
@keyframes vp-flash{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}

/* Control bar. */
.vp-bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:4px;height:48px;padding:0 8px;border-radius:14px;transition:opacity 250ms var(--ease-out,ease),transform 250ms var(--ease-out,ease)}
.vp.is-idle .vp-bar{opacity:0;transform:translateY(8px);pointer-events:none}
.vp.is-idle{cursor:none}
.vp.is-idle .vp-hit{cursor:none}
.vp-btn{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;padding:0;border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer;transition:background-color 150ms ease}
.vp-btn:hover{background:#ffffff1f}
.vp-btn:active{background:#ffffff2e}
.vp-btn svg{width:20px;height:20px}
.vp-btn:focus-visible,.vp-track:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vp-time{flex-shrink:0;padding:0 8px 0 4px;font-size:13px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.vp-time span{color:#ffffff99}

/* Scrubber: a 4px line that thickens under the pointer, white for progress, faint grey for what has loaded. The
   16px-tall hit area makes it easy to grab. */
.vp-track{position:relative;flex:1;min-width:0;height:36px;margin:0 8px;cursor:pointer;touch-action:none;border-radius:6px}
.vp-rail{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:999px;background:#ffffff2e;overflow:hidden;transition:height 150ms ease,margin-top 150ms ease}
.vp-track:hover .vp-rail,.vp-track.is-dragging .vp-rail,.vp-track:focus-visible .vp-rail{height:6px;margin-top:-3px}
.vp-buffer,.vp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(var(--vp-buffered,0));background:#ffffff47}
.vp-fill{transform:scaleX(var(--vp-progress,0));background:#fff}
.vp-thumb{position:absolute;top:50%;left:calc(var(--vp-progress,0)*100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0006;opacity:0;transform:scale(.6);transition:opacity 150ms ease,transform 150ms ease}
.vp-track:hover .vp-thumb,.vp-track.is-dragging .vp-thumb,.vp-track:focus-visible .vp-thumb{opacity:1;transform:scale(1)}
.vp-bubble{position:absolute;bottom:34px;left:var(--vp-bubble-x,calc(var(--vp-hover,0)*100%));display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:8px;font-size:12px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity 150ms ease}
.vp-track:hover .vp-bubble,.vp-track.is-dragging .vp-bubble{opacity:1}
/* With chapters the bubble names the chapter first, then the time in a quieter tone. */
.vp-bubble-title{color:#fff}
.vp-bubble-title[hidden]{display:none}
.vp-bubble-title:not([hidden])+span{color:#ffffffa6}

/* Fullscreen: the player itself goes fullscreen so these controls stay. */
.vp:fullscreen{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0;border-radius:0;background:#000}
.vp:fullscreen video{width:100%;height:100%;max-height:100vh;aspect-ratio:auto;object-fit:contain;background:#000}
.vp:fullscreen .vp-bar{left:24px;right:24px;bottom:24px}

/* transitions.dev "icon swap", pasted as shipped: play and pause, enter and exit fullscreen. */
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}
.vp .t-icon{display:grid;place-items:center}

@media(max-width:560px){
 .vp-bar{left:8px;right:8px;bottom:8px;height:44px;padding:0 4px;border-radius:12px}
 .vp-time{font-size:12px;padding:0 4px 0 2px}
 .vp-track{margin:0 6px}
 .vp-center{width:60px;height:60px;margin:-30px 0 0 -30px}
 .vp-center svg{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){.vp-bar,.vp-center,.vp-btn,.vp-rail,.vp-thumb,.vp-bubble{transition:none}.vp-center.is-flash{animation:none}}
@media(prefers-reduced-transparency:reduce){.vp-glass{background:#171717;-webkit-backdrop-filter:none;backdrop-filter:none}}