#story-area{position:relative;width:394px;height:700px;background:#000;overflow:hidden}
.sc-story-thumb { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; padding: 2px; cursor: pointer; flex-shrink: 0; transition: transform 0.2s ease; }
.sc-story-thumb:hover { transform: scale(1.05); }
.sc-progress-container {position:absolute;top:0px;left:0;width:100%;display:flex;gap:5px;padding:0 0;box-sizing:border-box;}
.sc-progress-bar { flex: 1; height: 5px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; overflow: hidden; position: relative; }
.sc-progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: white; transition: width 0.30s linear; will-change: width; }
.sc-nav-btn {position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);color:white;border:none;padding:10px;cursor:pointer;border-radius:50%;}
.sc-nav-btn.left {left:-50px;}
.sc-nav-btn.right {right:-50px;}
.sc-control-btn {position:absolute;top:60px;left:417px;transform:translateX(-50%);background:rgba(0,0,0,0.4);color:white;border:none;padding:8px 12px;cursor:pointer;border-radius:4px;}
.sc-close-btn {position:absolute;top:20px;right:-40px;color:white;border:none;padding:5px 8px;cursor:pointer;border-radius:4px;background: transparent;}
.sc-side-preview { position: absolute; top: 0; width: 394px; height: 700px; overflow: hidden; border-radius: 10px; background: #000; box-shadow: 0 6px 18px rgba(0,0,0,0.5); z-index: 2147483652; transform: scale(0.5); opacity: 0.5; }
.sc-side-preview.sc-side-prev { left: -450px; } 
.sc-side-preview.sc-side-next { right: -450px; }
.sc-side-preview iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.sc-side-overlay { position: absolute; inset: 0; z-index: 3; cursor: pointer; background: transparent; }
.sc-stories-bar { display: flex; gap: 20px; overflow-x: auto; padding: 10px 145px; align-items: center; scrollbar-width: none; } 
.sc-stories-bar::-webkit-scrollbar { display: none; }