/* ===== background system: ripple rings (centred on a visual) + dot fields (in empty space) ===== */
.rip{position:absolute;pointer-events:none;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:var(--s,920px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:repeating-radial-gradient(circle at center,transparent 0 calc(var(--g,64px) - 1.5px),var(--rc,#f1bfcc) calc(var(--g,64px) - 1.5px) var(--g,64px));
  -webkit-mask:radial-gradient(circle at center,transparent 0 18%,#000 30%,#000 46%,transparent 71%);mask:radial-gradient(circle at center,transparent 0 18%,#000 30%,#000 46%,transparent 71%)}
.dotf{position:absolute;pointer-events:none;z-index:-1;background-image:radial-gradient(var(--dc,#d9a3b2) 1.6px,transparent 1.8px);background-size:22px 22px;background-position:12px 12px;
  -webkit-mask:var(--m,radial-gradient(ellipse at center,#000 20%,transparent 72%));mask:var(--m,radial-gradient(ellipse at center,#000 20%,transparent 72%))}
@media(max-width:900px){.rip{--s:600px!important;--g:48px}.dotf{display:none}}

.rip{display:none!important}
/* random dot spreads (placed by site.js) */
.dspread{position:absolute;pointer-events:none;z-index:-1;background-image:radial-gradient(#d39aaa 1.6px,transparent 1.8px);background-size:22px 22px;
  -webkit-mask:radial-gradient(closest-side,#000 25%,transparent 100%);mask:radial-gradient(closest-side,#000 25%,transparent 100%)}
.dhost{position:relative;isolation:isolate;overflow-x:clip}
@media(max-width:900px){.dspread{transform:scale(.7)}}
.dhost .shot>img,.dhost .appshot>img{position:relative;z-index:0}
.dhost .shot .card,.dhost .shot .cap,.dhost .appwin,.dhost .audchip{z-index:2}
.dspread{background-image:radial-gradient(#cc8a9c 1.8px,transparent 2px)}
.dfield{position:absolute;left:0;top:0;z-index:-1;pointer-events:none}
.dspread{display:none!important}