@media (min-width: 901px) {
    .mobile-story-strip, .story-viewer { display: none !important; }
}

@media (max-width: 900px) {
    .mobile-story-strip {
        display: block;
        width: 100%;
        padding: 10px max(14px, calc((100vw - 720px) / 2)) 9px;
        background: #fff;
        border-bottom: 1px solid #e8e8eb;
        overflow: hidden;
    }
    .mobile-story-list {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 1px 2px 4px;
    }
    .mobile-story-list::-webkit-scrollbar { display: none; }
    .mobile-story-item {
        width: 72px;
        flex: 0 0 72px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #17181c;
        cursor: pointer;
        font: inherit;
    }
    .mobile-story-ring {
        position: relative;
        width: 66px;
        height: 66px;
        display: grid;
        place-items: center;
        padding: 3px;
        border-radius: 50%;
        background: linear-gradient(145deg, #f8d655, #d9a514);
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e8b92e;
    }
    .mobile-story-ring > img, .mobile-story-placeholder {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        border-radius: 50%;
        object-fit: cover;
        background: #17181c;
        border: 2px solid #fff;
    }
    .mobile-story-placeholder { color: #fff; font-size: 1.65rem; }
    .mobile-story-play {
        position: absolute;
        right: 1px;
        bottom: 1px;
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #e42328;
        border: 2px solid #fff;
        color: #fff;
        font-size: .8rem;
    }
    .mobile-story-title {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        color: #202127;
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.25;
    }
    .story-viewer[hidden] { display: none !important; }
    .story-viewer {
        position: fixed;
        inset: 0;
        z-index: 11000;
        display: grid;
        place-items: center;
        padding: 12px;
        background: rgba(0,0,0,.94);
    }
    .story-viewer-card {
        position: relative;
        width: min(100%, 430px);
        height: min(88dvh, 780px);
        overflow: hidden;
        border-radius: 18px;
        background: #09090b;
        box-shadow: 0 20px 80px rgba(0,0,0,.5);
    }
    .story-viewer-progress {
        position: absolute;
        top: 10px;
        left: 12px;
        right: 12px;
        z-index: 5;
        height: 3px;
        overflow: hidden;
        border-radius: 99px;
        background: rgba(255,255,255,.35);
    }
    .story-viewer-progress::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: #fff;
        transform: scaleX(0);
        transform-origin: left center;
    }
    .story-viewer-progress.is-playing::before { animation: story-progress var(--story-duration, 5s) linear forwards; }
    @keyframes story-progress { to { transform: scaleX(1); } }
    .story-viewer-header {
        position: absolute;
        top: 20px;
        left: 14px;
        right: 12px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        color: #fff;
        text-shadow: 0 1px 6px #000;
    }
    .story-viewer-actions { display: flex; align-items: center; gap: 8px; }
    .story-viewer-close[hidden] { display: none !important; }
    .story-viewer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
    .story-viewer-close, .story-nav {
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0,0,0,.4);
        color: #fff;
        cursor: pointer;
    }
    .story-viewer-close { width: 36px; height: 36px; font-size: 1.2rem; }
    .story-viewer-media { position: absolute; inset: 0; display: grid; place-items: center; }
    .story-viewer-media > img, .story-viewer-media > video { width: 100%; height: 100%; object-fit: contain; background: #050505; }
    .story-viewer-caption {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 18px;
        color: #fff;
        text-align: center;
        font-weight: 700;
        text-shadow: 0 1px 5px rgba(0,0,0,.9);
        pointer-events: none;
    }
    .story-nav { position: absolute; top: 50%; z-index: 4; width: 34px; height: 48px; border-radius: 8px; background: rgba(0,0,0,.24); }
    .story-prev { left: 7px; }
    .story-next { right: 7px; }
    body.story-open { overflow: hidden; }
}