.ej-carousel{
  position:relative;
}

.ej-viewport{
  overflow:hidden;
  border-radius:28px;

  padding:20px 0 64px; margin:-20px 0 -64px;
}

.ej-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.ej-slide{
  flex:0 0 100%;
  min-width:0;
}

.ej-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-top:var(--ej-nav-gap, 36px);
}

.ej-nav-btn{
  --ej-ring: var(--border-2);
  position:relative;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--ej-ring);
  background:var(--surface);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  outline:none;
  isolation:isolate;
  box-shadow:0 1px 2px rgba(0,0,0,0.06), 0 8px 20px -12px rgba(0,0,0,0.35);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease, color .25s ease;
  -webkit-tap-highlight-color:transparent;
}

.ej-nav-btn::before{
  content:''; position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg, #4C6FFF, #7C5CFF);
  opacity:0; transform:scale(.6);
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.ej-nav-btn svg{
  width:19px; height:19px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.ej-nav-btn:active{ transform:scale(.94); }
.ej-nav-btn:focus-visible{ box-shadow:0 0 0 3px var(--bg), 0 0 0 5px #7C5CFF; }
@media(hover:hover){
  .ej-nav-btn:hover{
    color:#fff; border-color:transparent;
    transform:translateY(-2px);
    box-shadow:0 14px 28px -12px rgba(92,96,255,0.65);
  }
  .ej-nav-btn:hover::before{ opacity:1; transform:scale(1); }
  .ej-nav-prev:hover svg{ transform:translateX(-2px); }
  .ej-nav-next:hover svg{ transform:translateX(2px); }
  .ej-nav-btn:hover:active{ transform:translateY(0) scale(.95); }
}

.ej-nav-center{
  display:flex; align-items:center; gap:16px;
  height:24px;
  padding:0 4px;
}
.ej-nav-count{
  display:inline-flex; align-items:baseline; gap:6px;
  font-size:13px; font-weight:600; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--text-muted);
  min-width:52px;
}
.ej-nav-current{ color:var(--text); }
.ej-nav-sep{ opacity:.6; }

.ej-nav-dots{ display:flex; align-items:center; gap:6px; }
.ej-dot{

  display:flex; align-items:center;
  height:24px; padding:0;
  background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.ej-dot span{
  display:block;
  width:22px; height:4px; border-radius:4px;
  background:var(--border-2);
  transition:width .45s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.ej-dot:hover span{ background:var(--text-muted); }
.ej-dot.is-active span{
  width:44px;
  background:linear-gradient(90deg, #4C6FFF, #7C5CFF);
}
.ej-dot:focus-visible span{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px #7C5CFF; }

@media(max-width:640px){
  .ej-nav{ margin-top:28px; gap:14px; }
  .ej-nav-btn{ width:44px; height:44px; }
  .ej-nav-center{ gap:12px; }
  .ej-nav-count{ min-width:0; font-size:12px; }
}
@media(max-width:360px){
  .ej-nav-count{ display:none; }
}

@media(min-width:901px){
  .ej-nav-btn{ position:absolute; top:calc(50% - (var(--ej-nav-gap, 36px) + 24px) / 2 - 24px); }
  #ejPrev{ left:-76px; }
  #ejNext{ right:-76px; }
}
@media(min-width:901px) and (max-width:1439px){
  .ej-carousel{ margin-inline:64px; }
  #ejPrev{ left:-64px; }
  #ejNext{ right:-64px; }
}