/* Lumen (gitea ai/lumen-player), cut down for a recorded video: HLS with hls.js where the browser has no HLS of
   its own, native HLS in Safari (so AirPlay works). The controls come in over the picture when it is hovered,
   touched or paused, and are gone 2 s after the last touch while it plays (1.6 s, then a 0.4 s fade).
   Every class starts with lm- so the page's own don't clash. */
.lumen{--lm-ease:cubic-bezier(.22,1,.36,1);--lm-spring:cubic-bezier(.16,1,.3,1);--lm-dpr:1;
  --lm-hair:max(.5px,calc(1px / var(--lm-dpr)));--lm-hair-strong:max(1px,calc(2px / var(--lm-dpr)));
  position:relative;user-select:none;-webkit-user-select:none;color:#fff;font-family:var(--text,-apple-system,BlinkMacSystemFont,system-ui,sans-serif)}
.lumen:focus{outline:none}
.lumen:focus-visible{outline:2px solid var(--bolt,#8cc8ff);outline-offset:4px}
.lumen video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.lumen video::-webkit-media-controls,.lumen video::-webkit-media-controls-panel,
.lumen video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.lumen.lm-hide-cursor,.lumen.lm-hide-cursor *{cursor:none!important}
.lumen:fullscreen{width:100vw;height:100vh;border-radius:0;box-shadow:none;background:#000}
.lumen:fullscreen video{width:100%;height:100%;aspect-ratio:auto}
.lumen:-webkit-full-screen{width:100vw;height:100vh;border-radius:0;box-shadow:none;background:#000}
.lumen:-webkit-full-screen video{width:100%;height:100%;aspect-ratio:auto}

.lm-veil{pointer-events:none;position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .45s var(--lm-ease);
  background:linear-gradient(180deg,transparent 0%,transparent 58%,rgba(0,0,0,.7) 100%)}
.lumen.lm-show-ui.lm-started .lm-veil,.lumen.lm-paused.lm-started .lm-veil{opacity:1}

.lm-taps{position:absolute;inset:0;z-index:2;display:flex}
.lm-taps button{flex:1;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lm-taps button:focus{outline:none}

.lm-center{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.lm-big{pointer-events:auto;width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);padding:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);background:rgba(4,6,11,.28);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transform:scale(.94);visibility:hidden;
  transition:opacity .35s var(--lm-ease),transform .45s var(--lm-spring),visibility 0s .35s,border-color .2s,background .2s}
.lumen.lm-paused .lm-big{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.lm-big:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:scale(1.04)}
.lm-big:active{transform:scale(.97)}
.lm-big svg{width:38%;height:38%;margin-left:6%;fill:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

.lm-buffer{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s}
.lm-buffer.on{opacity:1;transition-delay:.25s}
.lm-buffer i{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:#fff;animation:lm-spin .75s linear infinite}
@keyframes lm-spin{to{transform:rotate(360deg)}}

.lm-toast{position:absolute;top:14%;left:50%;z-index:6;transform:translate(-50%,-8px);padding:7px 12px;border-radius:999px;
  background:rgba(0,0,0,.6);font-size:13px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .25s,transform .3s var(--lm-spring)}
.lm-toast.on{opacity:1;transform:translate(-50%,0)}

.lm-flash{position:absolute;top:50%;z-index:5;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.42);font-size:13px;font-weight:600;opacity:0;pointer-events:none;transform:translateY(-50%) scale(.92);
  transition:opacity .3s,transform .4s var(--lm-spring)}
.lm-flash.lm-left{left:8%}
.lm-flash.lm-right{right:8%}
.lm-flash.on{opacity:1;transform:translateY(-50%) scale(1)}

.lm-controls{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 clamp(10px,1.4vw,18px) clamp(8px,1.2vw,16px);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s var(--lm-ease),transform .5s var(--lm-spring)}
.lumen.lm-started.lm-show-ui .lm-controls,.lumen.lm-started.lm-paused .lm-controls,.lumen.lm-menu-open .lm-controls{opacity:1;transform:none;pointer-events:auto}
.lm-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:36px}
.lm-cluster{display:flex;align-items:center;gap:4px;flex-shrink:0}

.lm-btn{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.94);width:36px;height:36px;border-radius:8px;padding:0;
  display:grid;place-items:center;cursor:pointer;transition:opacity .15s,transform .15s}
.lm-btn:hover{opacity:.75}
.lm-btn:active{transform:scale(.94)}
.lm-btn:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:1px}
.lm-btn[hidden]{display:none}
.lm-btn.on{color:var(--bolt,#8cc8ff)}
.lm-btn svg{width:22px;height:22px;display:block;overflow:visible;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.lm-vol{position:relative;display:flex;align-items:center}
.lm-vol-pop{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:30px;height:112px;padding:10px 0;border-radius:15px;
  background:rgba(28,28,30,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:none;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.lm-vol:hover .lm-vol-pop,.lm-vol:focus-within .lm-vol-pop{display:flex}
.lm-vol-pop input{writing-mode:vertical-lr;direction:rtl;width:16px;height:90px;margin:0;accent-color:#fff;cursor:pointer}
@media (hover:none){.lm-vol-pop{display:none!important}}

.lm-time{font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.94);padding:0 6px 0 4px;min-width:2.9em}
.lm-time.lm-remain{text-align:right;padding:0 4px 0 6px;min-width:3.4em}

.lm-scrub{position:relative;height:28px;display:grid;align-items:center;cursor:pointer;touch-action:none;min-width:0}
.lm-scrub:focus{outline:none}
.lm-scrub:focus-visible .lm-track{outline:2px solid rgba(255,255,255,.55);outline-offset:6px}
.lm-track{position:relative;height:var(--lm-hair-strong);border-radius:999px;background:rgba(255,255,255,.28)}
.lm-scrub:hover .lm-track,.lm-scrub.lm-drag .lm-track{height:max(2px,calc(3px / var(--lm-dpr)))}
.lm-buf,.lm-fill{position:absolute;inset:0 auto 0 0;height:100%;width:0;border-radius:inherit}
.lm-buf{background:rgba(255,255,255,.2)}
.lm-fill{background:rgba(255,255,255,.94)}
.lm-thumb{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .15s var(--lm-spring)}
.lm-scrub:hover .lm-thumb,.lm-scrub.lm-drag .lm-thumb{transform:scale(1.15)}

.lm-menu{position:absolute;right:12px;bottom:calc(100% + 6px);min-width:150px;padding:6px;border-radius:12px;z-index:8;display:none;
  background:rgba(28,28,30,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.lm-menu.open{display:block;animation:lm-rise .28s var(--lm-spring)}
@keyframes lm-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lm-menu-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.55);padding:8px 10px 4px}
.lm-menu button{width:100%;border:0;background:transparent;color:#fff;text-align:left;padding:9px 10px;border-radius:8px;
  font:inherit;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;gap:16px}
.lm-menu button:hover,.lm-menu button:focus-visible{background:rgba(255,255,255,.09);outline:none}
.lm-menu button[aria-checked=true]{color:var(--bolt,#8cc8ff)}

@media (max-width:640px){
  .lm-time{font-size:12px;min-width:2.6em}
  .lm-btn{width:32px;height:32px}
  .lm-btn svg{width:19px;height:19px}
  .lm-bar{gap:6px}
  .lm-hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lumen *,.lumen *::before,.lumen *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}