.af-stories{
  --circle-size:var(--af-story-circle-size,84px);
  --ring-grad:linear-gradient(135deg,#feda75,#dfb28e,#d62976,#bf2fa9,#9613c6);
  --ring-bg:#fff;
  position:relative;
}

.af-stories__rail{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.af-stories__rail::-webkit-scrollbar{display:none}
.af-stories__item{background:transparent;border:0;padding:0;cursor:pointer;flex:0 0 auto}
.af-stories__ring{
  position:relative;
  display:grid;
  place-items:center;
  width:calc(var(--circle-size) + 10px);
  height:calc(var(--circle-size) + 10px);
  border-radius:50%;
  padding:4px;
  background:var(--ring-grad);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
}
.af-stories__ring::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--ring-bg);
}
.af-stories__ring.is-seen{
  background:linear-gradient(180deg,var(--af-story-seen-ring,#c7c7cc),var(--af-story-seen-ring,#c7c7cc));
}
.af-stories__ring.is-seen::before{
  background:var(--af-story-seen-inner,#fff);
}
.af-stories__ring img{
  position:relative;
  z-index:1;
  width:var(--circle-size);
  height:var(--circle-size);
  object-fit:cover;
  border-radius:50%;
  border:2px solid #fff;
  display:block;
}
.af-stories__badge{
  position:absolute;
  right:2px;
  bottom:2px;
  z-index:3;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
}
.af-stories__badge-ring{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--af-highlight-badge-color,#ff0a78);
  color:#fff;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.32), inset 0 -4px 10px rgba(0,0,0,.18);
}
.af-stories__badge-ring::before{
  content:"";
  position:absolute;
  inset:4px;
  border:2px dashed rgba(255,255,255,.9);
  border-radius:50%;
}
.af-stories__badge svg{position:relative;z-index:1;width:13px;height:13px}
.af-story-modal[hidden]{display:none}
.af-story-modal{position:fixed;inset:0;z-index:99999}
.af-story-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.af-story-modal__dialog{position:relative;z-index:2;margin:30px auto;width:min(calc(100vw - 60px),calc((100vh - 60px)*9/16),420px);height:min(calc(100vh - 60px),calc((100vw - 60px)*16/9),746px);background:#111;border-radius:24px;overflow:hidden;color:#fff;box-shadow:0 26px 80px rgba(0,0,0,.48)}
.af-story-modal--instagram .af-story-modal__dialog{margin:0 auto;width:min(100vw,calc(100vh*9/16),420px);height:100vh;max-height:100vh;border-radius:0;box-shadow:none}
.af-story-modal__close{position:absolute;top:12px;left:12px;border:0;background:rgba(255,255,255,.16);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:24px;line-height:38px;z-index:7}
.af-story-modal__progress{position:absolute;top:12px;right:56px;left:12px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;z-index:6}
.af-story-modal__bar{height:3px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden}
.af-story-modal__bar-fill{display:block;width:100%;height:100%;transform-origin:right center;transform:scaleX(0);background:#fff;opacity:.95}
.af-story-modal__bar.is-active .af-story-modal__bar-fill{animation:afStoryTimer linear forwards}
.af-story-modal__bar.is-done .af-story-modal__bar-fill{transform:scaleX(1)}
@keyframes afStoryTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.af-story-modal__viewport{position:relative;width:100%;height:100%;overflow:hidden}
.af-story-modal__slides{position:relative;width:100%;height:100%}
.af-story-slide{position:absolute;inset:0;padding:50px 12px 12px;display:flex;flex-direction:column;gap:12px;background:#111;transform:translateX(100%);opacity:0;transition:transform .35s ease,opacity .35s ease;pointer-events:none}
.af-story-slide.is-active{transform:translateX(0);opacity:1;pointer-events:auto;z-index:3}
.af-story-slide.is-prev{transform:translateX(-100%);opacity:.65;z-index:1}
.af-story-slide.is-next{transform:translateX(100%);opacity:.65;z-index:1}
.af-story-slide__media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
.af-story-slide__media img,.af-story-slide__media video{display:block;width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:18px;background:#000}
.af-story-embed,.af-story-embed iframe{display:block;width:100%;height:100%;border:0;border-radius:18px;background:#000}
.af-story-slide__bottom{position:relative;z-index:8;display:flex;flex-direction:column;gap:10px}
.af-story-slide__cta a{display:inline-block;padding:10px 16px;border-radius:999px;text-decoration:none;background:#fff;color:#111;font-weight:700}
.af-story-modal__hit{position:absolute;top:0;bottom:140px;width:28%;border:0;background:transparent;cursor:pointer;z-index:5}
.af-story-modal__hit--prev{right:0}
.af-story-modal__hit--next{left:0}
.af-story-reply{position:relative;z-index:10;display:flex;flex-direction:column;gap:8px;padding:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(10px)}
.af-story-reply__meta,.af-story-reply__message{width:100%;height:44px;border:1px solid rgba(255,255,255,.14);background:rgba(18,18,18,.82);color:#fff;border-radius:14px;padding:0 14px;box-sizing:border-box;font:inherit}
.af-story-reply__meta::placeholder,.af-story-reply__message::placeholder{color:rgba(255,255,255,.56)}
.af-story-reply__inline{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}
.af-story-reply button{display:grid;place-items:center;width:44px;height:44px;border:0;background:#fff;color:#111;border-radius:14px;cursor:pointer;padding:0;margin:0}
.af-story-reply button svg{width:18px;height:18px}
.af-story-reply__msg{font-size:13px;min-height:18px;padding:0 2px}
.af-story-reply__msg.is-error{color:#ff8f8f}
.af-story-reply__msg.is-success{color:#9cf5aa}
@media (max-width:640px){
  .af-story-modal--popup .af-story-modal__dialog{width:min(calc(100vw - 60px),calc((100vh - 60px)*9/16));height:min(calc(100vh - 60px),calc((100vw - 60px)*16/9));border-radius:22px}
  .af-story-modal--instagram .af-story-modal__dialog{width:100vw;height:100vh;border-radius:0}
  .af-story-slide{padding:50px 10px 10px}
  .af-story-modal__progress{left:10px;right:54px;top:10px}
  .af-story-modal__close{top:10px;left:10px}
  .af-stories__badge{width:34px;height:34px;right:-2px;bottom:0}
  .af-stories__badge-ring{width:26px;height:26px}
}

.af-stories .af-story-modal__close,.af-stories .af-story-modal__hit,.af-stories .af-story-reply button,.af-stories .af-stories__item,.af-stories .af-story-slide__cta a{box-shadow:none!important;text-shadow:none!important;outline:none!important}
.af-stories .af-story-modal__close,.af-stories .af-story-modal__hit,.af-stories .af-story-reply button,.af-stories .af-stories__item{appearance:none;-webkit-appearance:none}
.af-stories .af-story-modal__close:hover,.af-stories .af-story-modal__close:focus,.af-stories .af-story-modal__hit:hover,.af-stories .af-story-modal__hit:focus,.af-stories .af-story-reply button:hover,.af-stories .af-story-reply button:focus,.af-stories .af-stories__item:hover,.af-stories .af-stories__item:focus{box-shadow:none!important;outline:none!important;border-color:transparent!important}
.af-story-reply--notice{display:flex;align-items:center;justify-content:center;min-height:56px}

.af-story-modal{--af-story-open-vh:100vh}
.af-story-modal__dialog{max-width:420px}
@media (max-width:640px){
  .af-story-modal--popup .af-story-modal__dialog{width:min(calc(var(--af-story-open-vh) - 60px),calc((var(--af-story-open-vh) - 60px)*9/16));height:min(calc(var(--af-story-open-vh) - 60px),calc((100vw - 60px)*16/9))}
  .af-story-modal--instagram .af-story-modal__dialog{width:100vw;height:var(--af-story-open-vh);max-height:var(--af-story-open-vh)}
  .af-story-slide__media{position:relative;z-index:1}
  .af-story-slide.is-replying .af-story-slide__bottom{position:absolute;left:10px;right:10px;bottom:max(10px, env(safe-area-inset-bottom));z-index:20}
  .af-story-slide.is-replying .af-story-slide__cta{display:none}
  .af-story-slide.is-replying .af-story-reply{background:rgba(12,12,12,.72);border-color:rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.35)}
}

.af-stories-feed{display:block;overflow-x:visible;padding:4px 2px 8px}
.af-stories__rail{display:flex;gap:18px;align-items:flex-start;overflow-x:auto;padding:0;scrollbar-width:none}
.af-stories__rail::-webkit-scrollbar{display:none}
.af-stories__item{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;margin:0;cursor:pointer;flex:0 0 auto}
.af-stories__ring{width:calc(var(--af-story-circle-size,84px) + 10px);height:calc(var(--af-story-circle-size,84px) + 10px)}
.af-stories__label{max-width:calc(var(--af-story-circle-size,84px) + 10px);font-size:12px;line-height:1.35;color:#111;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.af-stories__label{display:block;margin-top:8px;font-size:12px;line-height:1.35;color:#222;text-align:center;max-width:calc(var(--circle-size) + 12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}