/* The video frame follows the video's aspect ratio; artwork never acts as its poster. */
.circle-audio-stage.has-video {
  display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:0;padding:0;
  flex:none;aspect-ratio:var(--video-aspect,16/9);background:#080b0e;overflow:hidden;
}
.circle-audio-stage.has-video .circle-video-shell {
  --circle-video-accent:#62d4ca;
  position:relative;width:100%;height:auto;max-width:none;max-height:none;
  flex:none;aspect-ratio:inherit;
  overflow:hidden;background:#080b0e;color:#fff;direction:ltr;
}
html[data-podly-theme=light] .circle-video-shell { --circle-video-accent:#5ab1ed; }
.circle-audio-stage.has-video .circle-video-shell .circle-post-video {
  position:absolute;inset:0;z-index:1;display:block;width:100%!important;height:100%!important;
  max-width:none;max-height:none;margin:0!important;border:0;border-radius:0;
  aspect-ratio:auto;object-fit:contain;opacity:0;cursor:pointer;
  touch-action:manipulation;-webkit-touch-callout:none;
}
.circle-audio-stage.has-video .circle-video-shell.is-ready .circle-post-video { opacity:1!important; }
.circle-video-skeleton {
  position:absolute;inset:0;z-index:0;background:linear-gradient(115deg,#151a1f,#242a2f,#151a1f);
  background-size:220% 100%;animation:circle-video-wait 1.6s ease-in-out infinite;
}
.circle-video-shell.is-ready .circle-video-skeleton { display:none; }
.circle-video-shell.is-error .circle-video-skeleton { display:block;animation:none;background:#14181c; }
.circle-video-center {
  position:absolute;z-index:4;top:50%;left:50%;display:grid;place-items:center;
  width:48px;height:48px;padding:0;transform:translate(-50%,-50%);
  border:0;border-radius:0;background:transparent;color:#fff;
  box-shadow:none;cursor:pointer;backdrop-filter:none;
}
.circle-video-center svg { width:30px;height:30px;fill:currentColor;stroke:none;filter:drop-shadow(0 2px 6px #0009); }
.circle-video-shell.is-playing .circle-video-center { opacity:0;pointer-events:none; }
.circle-video-center:hover,.circle-video-center:focus-visible { color:#fff;filter:drop-shadow(0 2px 8px #000c); }
.circle-video-controls {
  position:absolute;z-index:5;right:0;bottom:0;left:0;padding:8px 13px 9px;
  background:linear-gradient(transparent,#02070872 60%,#020708b8);color:#dce7e6;
  opacity:.82;
  transition:opacity .18s ease;
}
.circle-video-toolbar{display:none!important}
.circle-video-shell .circle-post-video{cursor:pointer!important}
.circle-video-toolbar { display:flex;align-items:center;gap:9px;min-height:32px; }
.circle-video-toolbar button {
  display:grid;place-items:center;flex:none;width:32px;height:32px;padding:5px;border:0;
  border-radius:7px;background:transparent;color:inherit;cursor:pointer;
}
.circle-video-toolbar button:last-child { margin-left:auto; }
.circle-video-toolbar button:hover,.circle-video-toolbar button:focus-visible { background:#ffffff26; }
.circle-video-toolbar svg { width:20px;height:20px; }
.circle-video-time { font:600 11px/1.5 ui-monospace,SFMono-Regular,monospace;direction:ltr; }
.circle-video-seek {
  display:block;width:100%;height:14px;margin:0;padding:0;appearance:none;-webkit-appearance:none;
  border:0;background:transparent;cursor:pointer;direction:ltr;
}
.circle-video-seek::-webkit-slider-runnable-track {
  height:3px;border-radius:99px;background:linear-gradient(to right,#62d4ca99 var(--progress,0%),#dce8e72e var(--progress,0%));
}
.circle-video-seek::-moz-range-track { height:3px;border-radius:99px;background:#dce8e72e; }
.circle-video-seek::-moz-range-progress { height:3px;border-radius:99px;background:#62d4ca99; }
.circle-video-seek::-webkit-slider-thumb {
  width:0;height:0;margin-top:0;appearance:none;-webkit-appearance:none;
  border:0;border-radius:0;background:transparent;box-shadow:none;opacity:0;
}
.circle-video-seek::-moz-range-thumb { width:0;height:0;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:0; }
.circle-video-seek:disabled { cursor:default;opacity:.55; }
.circle-video-shell :is(button,input):focus-visible { outline:2px solid #8ce3d9;outline-offset:2px; }
@media(hover:hover) and (pointer:fine) {
  .circle-video-shell.is-playing:not(:hover):not(:focus-within) .circle-video-controls { opacity:.82;pointer-events:auto; }
}
@media(max-width:780px) {
  .circle-video-controls { padding-inline:10px; }
  .circle-video-center { width:52px;height:52px; }
}
@media(prefers-reduced-motion:reduce) {
  .circle-video-skeleton { animation:none; }
  .circle-video-controls { transition:none; }
}
@keyframes circle-video-wait { 50% { background-position:100% 0; } }