.ok-stories{padding:38px 0 48px;background:linear-gradient(180deg,#f6fafc,#fff)}
.ok-story-track{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 8px;direction:inherit}
.ok-story-track::-webkit-scrollbar{display:none;width:0;height:0}
.ok-story-card{position:relative;isolation:isolate;flex:0 0 calc((100% - (var(--ok-story-columns) - 1)*18px)/var(--ok-story-columns));aspect-ratio:9/16;min-width:0;overflow:hidden;border-radius:18px;scroll-snap-align:start;background:linear-gradient(145deg,#123b52,#007f8f);box-shadow:0 10px 24px rgba(8,40,69,.08);color:#fff;text-decoration:none}
.ok-story-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 40%,rgba(0,0,0,.72));z-index:0}
.ok-story-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.ok-story-card:hover img{transform:scale(1.035)}
.ok-story-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ok-teal);z-index:1;font-size:19px}
.ok-story-caption{position:absolute;inset-inline:16px;bottom:20px;z-index:1;color:#fff;font-size:15px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.ok-story-dialog{width:min(420px,calc(100vw - 32px));max-height:90dvh;padding:38px 0 0;border:0;border-radius:16px;background:#102535;color:#fff;overflow:hidden}
.ok-story-dialog::backdrop{background:rgba(0,0,0,.78)}
.ok-story-close{position:absolute;top:0;right:5px;width:36px;height:36px;border:0;background:transparent;color:#fff;font-size:29px;cursor:pointer}
.ok-story-player{aspect-ratio:9/16;max-height:calc(90dvh - 38px)}
.ok-story-player iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:900px){.ok-story-card{flex-basis:calc((100% - 36px)/3)}}
@media(max-width:600px){.ok-stories{padding:28px 0 32px}.ok-story-track{gap:12px}.ok-story-card{flex-basis:calc((100% - 12px)/2);border-radius:13px}.ok-story-caption{font-size:13px;inset-inline:12px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.ok-story-card img{transition:none}}


.ok-story-card:focus-visible,.ok-story-close:focus-visible,.ok-story-track:focus-visible{outline:3px solid var(--ok-teal);outline-offset:3px}