.skin-flag-layer {
  position: fixed;
  inset: -80vmax;
  z-index: -4;
  pointer-events: none;
  display: none;
  background: transparent;
  transform-origin: center;
}

body.skin-active.skin-svg .skin-flag-layer {
  display: block;
}

body.skin-active.skin-svg::before {
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.18) 18% 20%, transparent 20% 100%),
    linear-gradient(145deg, transparent 0 58%, rgba(255,255,255,.12) 58% 60%, transparent 60% 100%);
  opacity: calc(.30 + var(--skin-alpha, .70) * .22);
}

body.skin-active.skin-svg::after {
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 255, 255, calc(.10 + var(--skin-alpha, .70) * .14)), transparent 30%),
    linear-gradient(180deg, rgba(2, 7, 18, calc(var(--skin-shade, .68) - .14)), rgba(2, 7, 18, var(--skin-shade, .68)));
}

.skin-preview.is-flag-svg {
  position: relative;
  background: rgba(2, 7, 18, .62);
}

.skin-preview.is-flag-svg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(180deg, rgba(2, 7, 18, .18), rgba(2, 7, 18, .34)),
    var(--skin-preview-flag-url) var(--skin-preview-x, 50%) var(--skin-preview-y, 50%) / var(--skin-preview-size, 120%) auto no-repeat;
  transform: rotate(var(--skin-preview-rotation, 0deg));
  transform-origin: center;
}

.skin-preview.is-flag-svg::after {
  position: relative;
}