.kzd{
  --kzd-max-width:var(--kailab-zoom-width,100%);
  --kzd-ratio:16/9;
  --kzd-radius:22px;
  --kzd-dissolve-ms:700ms;
  width:min(100%,var(--kzd-max-width));
  margin-inline:auto;
}
.kzd__viewport{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:var(--kzd-ratio);
  border-radius:var(--kzd-radius);
  background:#f7f9ff;
  box-shadow:0 12px 36px rgba(83,104,147,.10);
  touch-action:pan-y;
}
.kzd__slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity var(--kzd-dissolve-ms) ease-in-out;
}
.kzd__slide.is-active{z-index:1;}
.kzd__slide.is-visible{opacity:1;}
.kzd__slide.is-entering{z-index:2;opacity:0;}
.kzd__slide.is-entering.is-visible{opacity:1;}
.kzd__slide.is-leaving{z-index:1;opacity:0;}
.kzd__slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:var(--kzd-x,50%) var(--kzd-y,50%);
  transform-origin:var(--kzd-x,50%) var(--kzd-y,50%);
  transform:scale(1) translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
}
.kzd__nav{
  position:absolute;top:50%;z-index:5;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.86);color:#6076a7;font-size:30px;line-height:1;
  box-shadow:0 8px 22px rgba(73,93,133,.14);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.kzd__nav--prev{left:14px}.kzd__nav--next{right:14px}
.kzd__dots{position:absolute;z-index:5;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.72)}
.kzd__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#c6cdea;cursor:pointer;transition:transform .2s ease,background-color .2s ease;-webkit-tap-highlight-color:transparent}
.kzd__dot.is-active{background:#7388c5;transform:scale(1.2)}
.kzd-empty{padding:24px;border:1px dashed #cbd5ea;border-radius:14px;text-align:center;color:#6f7e9d;background:#f8faff}
.kzd.is-reduced-motion .kzd__slide{transition:none!important}
@media(max-width:600px){.kzd__nav{width:38px;height:38px;font-size:27px}.kzd__nav--prev{left:8px}.kzd__nav--next{right:8px}.kzd__dots{bottom:8px;gap:7px;padding:6px 9px}}