.pl-close.frd-host{display:block;text-align:center;justify-self:stretch;width:100%;max-width:1280px;margin-inline:auto;box-sizing:border-box}
.frd{position:relative;width:100%;overflow:hidden;isolation:isolate;height:620px;height:clamp(520px,calc(100svh - var(--navh,52px) - 24px),820px);border-radius:8px;background:var(--ink,#1d2021);-webkit-tap-highlight-color:transparent}
.frd-cam{position:absolute;left:50%;top:50%;width:var(--cw,100%);aspect-ratio:1600/1067;transform-origin:44.5% 47.8%;transform:translate(-50%,-50%) translate(0,0) scale(1.02);will-change:transform}
.frd-cam picture,.frd-photo{position:absolute;inset:0;display:block;width:100%;height:100%}
.frd-photo{object-fit:cover}
.frd-sketch{position:absolute;display:block;max-width:none;opacity:0;clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);filter:drop-shadow(0 0 1px rgba(230,236,189,.35))}
.frd-dim{position:absolute;inset:0;background:rgba(22,24,25,.55);opacity:0}
.frd-shade{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 80% at 50% 36%,transparent 45%,rgba(29,32,33,.7) 100%),linear-gradient(to top,rgba(29,32,33,.95) 0,rgba(29,32,33,.72) 28%,rgba(29,32,33,0) 52%)}
.frd-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;justify-items:center;gap:clamp(18px,3vw,32px);padding:0 20px clamp(32px,6vh,64px)}
.frd .pl-close-t{max-width:14ch;text-shadow:0 2px 24px rgba(29,32,33,.8)}
.frd-w{display:inline-block}
.frd-replay{position:absolute;z-index:3;top:12px;right:12px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(230,236,189,.35);background:rgba(29,32,33,.55);color:var(--paper,#e6ecbd);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.frd-replay svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.frd-replay:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.frd-done .frd-replay{opacity:1;visibility:visible;transition:opacity .3s}
.frd-done{cursor:pointer}

.frd-arm .frd-w,.frd-arm .frd-copy .btn{opacity:0;transform:translateY(.45em)}
.frd-arm .frd-copy .btn{transform:translateY(12px)}

.frd-go .frd-cam,.frd-end .frd-cam{transform:translate(-50%,-50%) translate(var(--tx,0),var(--ty,0)) scale(var(--z,2))}
.frd-go .frd-cam{transition:transform 2.1s cubic-bezier(.5,0,.2,1) .6s}
.frd-go .frd-dim,.frd-end .frd-dim{opacity:1}
.frd-go .frd-dim{transition:opacity .6s linear 2.3s}
.frd-go .frd-sketch,.frd-end .frd-sketch{opacity:1;clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
.frd-go .frd-sketch{transition:clip-path 1.3s cubic-bezier(.55,0,.3,1) 2.5s,-webkit-clip-path 1.3s cubic-bezier(.55,0,.3,1) 2.5s,opacity .3s linear 2.5s}
.frd-go .frd-photo,.frd-end .frd-photo{opacity:0}
.frd-go .frd-photo{transition:opacity .9s ease 3.4s}
.frd-go .frd-shade,.frd-end .frd-shade{opacity:1}
.frd-go .frd-shade{transition:opacity .8s ease 3.6s}
.frd-go .frd-w,.frd-end .frd-w,.frd-go .frd-copy .btn,.frd-end .frd-copy .btn{opacity:1;transform:none}
.frd-go .frd-w{transition:opacity .45s ease,transform .6s var(--ease);transition-delay:calc(4.1s + var(--i,0) * 70ms)}
.frd-go .frd-copy .btn{transition:opacity .4s ease,transform .5s var(--ease);transition-delay:calc(4.3s + var(--i,0) * 70ms)}

@media (max-width:599px){
  .pl-close.frd-host{padding-inline:0}
  .frd{border-radius:0}
  .frd .pl-close-t{font-size:clamp(38px,11vw,48px)}
}
@media (min-width:900px){
  .frd{height:clamp(560px,calc(100svh - var(--navh,52px) - 64px),780px)}
}
@media (prefers-reduced-motion:reduce){
  .frd *,.frd{transition:none!important}
}