#vatune-gfx-box {
  margin: 16px 0 10px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}

#vatune-gfx-box.is-ready {
  opacity: 1;
  visibility: visible;
}

#vatune-gfx-box .vatune-gfx-title {
  font-size: 12px;
  opacity: .65;
  margin-bottom: 8px;
}

#vatune-gfx-box .vatune-gfx-canvas {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

#vatune-gfx-box.is-dark .vatune-gfx-canvas {
  background: #2b2f33;
}

#vatune-gfx-box .vatune-gfx-fallback {
  width: 100%;
  height: auto;
  display: block;
}

#vatune-gfx-preview {
  width: 100%;
  display: none;
  aspect-ratio: var(--vatune-gfx-ar, 3 / 1);
  background-color: #000;
  background-image: none;
  background-repeat: var(--vatune-tex-repeat, no-repeat);
  background-position: center;
  background-size: var(--vatune-tex-size, cover);
  -webkit-mask-image: var(--vatune-mask-url);
  mask-image: var(--vatune-mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

#vatune-gfx-preview.is-glow-night {
  filter: saturate(1.2) brightness(1.08) drop-shadow(0 0 3px rgba(180, 255, 180, .9))
    drop-shadow(0 0 10px rgba(120, 255, 120, .65)) drop-shadow(0 0 18px rgba(80, 255, 80, .45));
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  #vatune-gfx-preview {
    display: block;
  }

  #vatune-gfx-box .vatune-gfx-fallback {
    display: none;
  }
}