:root{--story-color:#ff7a00}
.wp-stories{display:flex;gap:14px;padding:12px;overflow-x:auto}
.story{text-align:center;font-size:12px}
.story img{width:72px;height:72px;border-radius:50%;padding:3px;background:linear-gradient(45deg,var(--story-color),#ffd194)}
.story.viewed img{filter:grayscale(1);opacity:.5}
.story-viewer{position:fixed;
	inset:0;
	background:#000;
	display:none;
	justify-content:center;align-items:center;
	z-index:9999}
.story-viewer video,
.story-viewer img {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
object-fit: contain;
background: black;
.progress{position:absolute;top:15px;left:10px;right:10px;height:4px;background:rgba(255,255,255,.3)}
.progress span{display:block;height:100%;width:0;background:var(--story-color)}
.close{position:absolute;top:20px;right:20px;font-size:32px;color:#fff}