.ob-stories { min-width:0; }
.ob-story-strip { display:flex; gap:12px; padding:2px 2px 12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; }
.ob-story-card { container-type:inline-size; flex:0 0 clamp(136px,19vw,300px); min-width:0; scroll-snap-align:start; }
.ob-story-thumb { position:relative; display:block; aspect-ratio:9/16; overflow:hidden; background:var(--color-surface-soft); border:1px solid var(--color-border-subtle); border-radius:8px; box-shadow:0 10px 24px rgb(23 33 29 / .08); }
.ob-story-media-link { display:block; width:100%; height:100%; }
.ob-story-media-link>.external { display:none; }
.ob-story-image { display:block; width:100%; height:100%; object-fit:contain; }
.ob-story-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:16px; color:var(--color-text-muted); text-align:center; pointer-events:none; font-size:.85rem; z-index:0; }
.ob-story-image { position:relative; z-index:1; }
.ob-story-media-failed .ob-story-image { visibility:hidden; }
.ob-story-rule { position:absolute; top:clamp(8px,4.7%,14px); left:clamp(8px,4.7%,14px); right:clamp(8px,4.7%,14px); height:2px; background:rgb(255 255 255 / .92); border-radius:999px; box-shadow:0 1px 4px rgb(0 0 0 / .24); z-index:3; pointer-events:none; }
.ob-story-header { position:absolute; top:0; left:0; right:0; display:grid; grid-template-columns:clamp(28px,14%,42px) minmax(0,1fr); gap:clamp(5px,3%,9px); align-items:center; padding:clamp(18px,10%,30px) clamp(8px,4.7%,14px) 24px; background:linear-gradient(rgb(0 0 0 / .64),transparent); color:white; text-shadow:0 1px 7px rgb(0 0 0 / .58); z-index:2; pointer-events:none; }
.ob-story-avatar { position:relative; display:grid; place-items:center; aspect-ratio:1; overflow:hidden; color:white; background:rgb(255 255 255 / .2); border:1px solid rgb(255 255 255 / .8); border-radius:50%; font-size:.86rem; font-weight:900; box-shadow:0 2px 8px rgb(0 0 0 / .25); }
.ob-story-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ob-story-identity { min-width:0; }
.ob-story-identity strong,.ob-story-identity time { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-story-identity strong { color:white; font-size:clamp(.72rem,5.1cqw,1.08rem); font-weight:900; line-height:1.5; }
.ob-story-identity time { color:rgb(255 255 255 / .9); font-size:clamp(.66rem,4.3cqw,.98rem); line-height:1.5; }
.ob-story-footer { position:absolute; bottom:0; left:0; right:0; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; padding:24px 10px 8px; background:linear-gradient(transparent,rgb(0 0 0 / .78)); color:white; font-size:clamp(.65rem,4cqw,.85rem); pointer-events:none; }
.ob-story-footer time { text-shadow:0 1px 4px black; }
.ob-story-original { display:inline-flex; align-items:center; gap:3px; min-height:30px; color:white; text-decoration:underline; text-underline-offset:3px; pointer-events:auto; }
.ob-story-thumb:has(video) .ob-story-footer { bottom:42px; }
.ob-story-original:hover { color:white; }
.ob-story-original:focus-visible { outline:2px solid white; outline-offset:3px; }
.ob-story-empty { margin:0; padding:18px 0; color:var(--color-text-muted); font-size:.9rem; }
@media (prefers-reduced-motion:reduce) { .ob-story-strip { scroll-behavior:auto; } }