.home-story-tabs a.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

@media (max-width: 768px) {
    body:not(.reader-body) .home-module {
        padding: 1rem;
        border-radius: 18px;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        margin: 1.25rem 0;
    }

    body:not(.reader-body) .home-module__grid {
        display: grid;
        gap: 1rem;
    }

    body:not(.reader-body) .home-featured__track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(29vw, 32vw);
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-behavior: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.reader-body) .home-music__player-frame {
        height: 158px;
    }

    body:not(.reader-body) .home-music__upload-player {
        grid-template-columns: 72px minmax(0,1fr);
        gap: .65rem;
        padding: 8px;
    }

    body:not(.reader-body) .home-music__cover { width:72px; height:72px; }

    body:not(.reader-body) .home-music__track-title { font-size:.86rem; }
    body:not(.reader-body) .home-music__artist { font-size:.75rem; }
    body:not(.reader-body) .home-music__play { width:36px; height:36px; }

    body:not(.reader-body) .home-recent-comments__text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    body:not(.reader-body) .home-featured__item {
        scroll-snap-align: start;
    }

    body:not(.reader-body) .home-featured__cover {
        width: 100%;
        height: 100%;
        aspect-ratio: 2 / 3;
        object-fit: cover;
        display: block;
    }

    body:not(.reader-body) .home-recent-comments__list {
        display: grid;
        gap: .55rem;
    }

    body:not(.reader-body) .home-recent-comments__item {
        padding: .7rem .75rem;
        border: 1px solid var(--color-border);
        border-radius: 14px;
        background: var(--color-background);
    }

    body:not(.reader-body) .home-recent-comments__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        color: var(--color-muted);
        font-size: 0.85rem;
    }

    body:not(.reader-body) .home-recent-comments__story,
    body:not(.reader-body) .home-recent-comments__content {
        color: inherit;
        text-decoration: none;
    }

    body:not(.reader-body) .home-recent-comments__story {
        font-weight: 700;
        color: var(--color-primary);
    }

    body:not(.reader-body) .home-recent-comments__chapter,
    body:not(.reader-body) .home-recent-comments__author {
        color: var(--color-text-secondary);
    }

    body:not(.reader-body) .home-recent-comments__content {
        color: var(--color-text);
        line-height: 1.5;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    body:not(.reader-body) .home-extra-modules,
    body:not(.reader-body) .home-extra-modules--both {
        grid-template-columns: minmax(0, 1fr);
        gap: .85rem;
        margin: .85rem 0;
    }

    body:not(.reader-body) .home-music__frame {
        height: 250px;
        padding: 8px;
        border-radius: 14px;
    }

    body:not(.reader-body) .home-music__video-shell {
        max-width: 565px;
    }

    

    body:not(.reader-body) .home-music__audio-shell,
    body:not(.reader-body) .home-music__audio-shell .home-music__iframe {
        height: 226px;
    }

    body:not(.reader-body) .home-music__footer {
        gap: .5rem;
    }

    body:not(.reader-body) .home-music__provider,
    body:not(.reader-body) .home-music__external-link {
        font-size: .75rem;
    }
}
@media (max-width: 768px) {
    body:not(.reader-body) .is-mobile-collapsible .home-panel-list,
    body:not(.reader-body) .is-mobile-collapsible .home-panel-footer,
    body:not(.reader-body) .is-mobile-collapsible .home-panel-text-content,
    body:not(.reader-body) .is-mobile-collapsible .home-panel-editors {
        display: none !important;
    }

    body:not(.reader-body) .is-mobile-collapsible.is-open .home-panel-list,
    body:not(.reader-body) .is-mobile-collapsible.is-open .home-panel-text-content {
        display: block !important;
    }

    body:not(.reader-body) .is-mobile-collapsible.is-open .home-panel-footer {
        display: flex !important;
    }

    body:not(.reader-body) .is-mobile-collapsible.is-open .home-panel-editors {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.reader-body) .is-mobile-collapsible .home-panel-header {
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body:not(.reader-body) .home-panel-mobile-toggle {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        margin-left: auto;
        padding: 0;
        border-radius: 999px;
        display: inline-grid;
        place-items: center;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
        color: var(--color-primary);
        font: inherit;
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body:not(.reader-body) .home-panel-mobile-toggle:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
    
    body:not(.reader-body) .section-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    body:not(.reader-body) .home-panels,
    body:not(.reader-body) .home-panels[data-visible-count="3"],
    body:not(.reader-body) .home-panels[data-visible-count="2"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        width: 100%;
        max-width: 100%;
    }

    body:not(.reader-body) .home-panel {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .home-panel--text .home-panel-text-content {
        padding: 16px;
        text-align: left;
        text-align-last: auto;
        line-height: 1.68;
    }

    .home-panel-text-signature {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    body:not(.reader-body) .home-music__transport.has-playlist {
        grid-template-columns: 30px 36px 30px minmax(0, 1fr);
        gap: .4rem;
    }

    body:not(.reader-body) .home-music__skip {
        width: 30px;
        height: 30px;
    }

    body:not(.reader-body) .home-music__lower-controls {
        gap: .45rem;
    }

    body:not(.reader-body) .home-music__volume {
        min-width: 86px;
    }

    body:not(.reader-body) .home-music__volume input {
        width: 64px;
    }

    body:not(.reader-body) .home-recent-comments--wide .home-recent-comments__list {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    body:not(.reader-body) .home-extra-modules,
    body:not(.reader-body) .home-extra-modules--both {
        gap: 1rem;
    }

    body:not(.reader-body) .home-extra-modules > .home-module {
        padding: 1rem;
    }

    body:not(.reader-body) .home-module__header {
        margin-bottom: .8rem;
    }

    body:not(.reader-body) .home-music {
        gap: .6rem;
    }

    body:not(.reader-body) .home-music__player-frame {
        height: 166px;
    }

    body:not(.reader-body) .home-music__upload-player {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: .72rem;
        padding: 10px;
    }

    body:not(.reader-body) .home-music__cover {
        width: 74px;
        height: 74px;
        border-radius: 12px;
    }

    body:not(.reader-body) .home-music__track-title,
    body:not(.reader-body) .home-music__artist,
    body:not(.reader-body) .home-recent-comments__time,
    body:not(.reader-body) .home-recent-comments__text {
        line-height: 1.4;
    }

    body:not(.reader-body) .home-music__lower-controls {
        gap: .65rem;
        flex-wrap: wrap;
    }

    body:not(.reader-body) .home-music__volume {
        min-width: 96px;
    }

    body:not(.reader-body) .home-recent-comments__item {
        padding: .78rem .82rem;
    }

    body:not(.reader-body) .home-recent-comments__top {
        grid-template-columns: minmax(0, 1fr);
        gap: .28rem;
    }

    body:not(.reader-body) .home-recent-comments__time {
        justify-self: start;
    }

    body:not(.reader-body) .home-recent-comments__text {
        margin-top: .4rem;
    }
}
.home-featured__track.is-auto-scrolling {
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto;
}

.home-recent-comments__story,
.home-recent-comments__text,
.home-recent-comments__item a {
    text-decoration: none !important;
}

.home-recent-comments__story:hover,
.home-recent-comments__text:hover {
    text-decoration: none !important;
}
@media (max-width: 768px) {
    body:not(.reader-body) .home-featured__viewport {
        overflow: hidden;
        touch-action: pan-y;
    }

    body:not(.reader-body) .home-featured__viewport .home-featured__track {
        display: flex;
        grid-auto-flow: unset;
        grid-auto-columns: unset;
        overflow: visible;
        scroll-snap-type: none;
        -webkit-overflow-scrolling: auto;
        padding-bottom: 0.5rem;
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }

    body:not(.reader-body) .home-featured__viewport .home-featured__item {
        flex: 0 0 var(--home-featured-item-width, 32vw);
        width: var(--home-featured-item-width, 32vw);
        min-width: var(--home-featured-item-width, 32vw);
        max-width: var(--home-featured-item-width, 32vw);
        scroll-snap-align: none;
    }
}
@media (max-width: 768px) {
    body:not(.reader-body) .home-recent-comments__list > .home-recent-comments__item:nth-child(n + 4) {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .home-info-list li {
        grid-template-columns: auto 1fr;
    }
}

/* Recent-comment avatars use the same compact role ring as in comment threads. */
.home-comment-avatar {
    --home-comment-role: #64748b;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--color-surface, #fff);
    border-radius: 50%;
    background: color-mix(in srgb, var(--home-comment-role) 18%, var(--color-surface, #fff));
    box-shadow: 0 0 0 2px var(--home-comment-role), 0 1px 4px rgba(0,0,0,.18);
    color: var(--color-text, #111827);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.home-comment-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.home-comment-avatar--guest { --home-comment-role:var(--user-role-guest-fill,#55647A); }
.home-comment-avatar--member { --home-comment-role:var(--user-role-member-fill,#2F6FE0); }
.home-comment-avatar--smember { --home-comment-role:var(--user-role-smember-fill,#E0A83C); }
.home-comment-avatar--editor { --home-comment-role:var(--user-role-admin-fill,#7C4FE0); }
.home-comment-avatar--admin { --home-comment-role:var(--user-role-admin-fill,#7C4FE0); }
.home-recent-comments__top { align-items:center; }

/* Homepage recent comments: desktop avatar spans two metadata lines; mobile stays compact. */
@media (min-width: 769px) {
    body:not(.reader-body) .home-recent-comments__top {
        display: grid !important;
        grid-template-columns: 2.85rem minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        column-gap: .62rem !important;
        row-gap: 0 !important;
        align-items: start !important;
    }

    body:not(.reader-body) .home-comment-avatar {
        width: 2.72rem;
        height: 2.72rem;
        flex: 0 0 2.72rem;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    body:not(.reader-body) button.home-comment-avatar {
        appearance: none;
        -webkit-appearance: none;
        padding: 0;
        margin: 0;
        cursor: zoom-in;
    }

    body:not(.reader-body) .home-recent-comments__identity {
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: .18rem;
        align-self: center;
    }

    body:not(.reader-body) .home-recent-comments__name,
    body:not(.reader-body) .home-recent-comments__story {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.reader-body) .home-recent-comments__time {
        grid-column: 3;
        grid-row: 1;
        justify-self: end !important;
        align-self: start;
        white-space: nowrap;
        margin-top: .05rem;
    }

    body:not(.reader-body) .home-recent-comments__text {
        margin-left: calc(2.85rem + .62rem);
        margin-top: .34rem;
    }
}

@media (max-width: 768px) {
    body:not(.reader-body) .home-recent-comments__top {
        display: grid !important;
        grid-template-columns: 2rem minmax(0, 1fr) auto !important;
        column-gap: .55rem !important;
        row-gap: 0 !important;
        align-items: start !important;
    }

    body:not(.reader-body) .home-comment-avatar {
        width: 2rem;
        height: 2rem;
        flex: 0 0 2rem;
        grid-column: 1;
        grid-row: 1;
    }

    body:not(.reader-body) button.home-comment-avatar {
        appearance: none;
        -webkit-appearance: none;
        padding: 0;
        margin: 0;
        cursor: zoom-in;
    }

    body:not(.reader-body) .home-recent-comments__identity {
        grid-column: 2;
        grid-row: 1;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: .12rem;
        min-width: 0;
    }

    body:not(.reader-body) .home-recent-comments__name,
    body:not(.reader-body) .home-recent-comments__story {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not(.reader-body) .home-recent-comments__time {
        grid-column: 3;
        grid-row: 1;
        justify-self: end !important;
        align-self: start;
        white-space: nowrap;
        font-size: .74rem;
    }

    body:not(.reader-body) .home-recent-comments__text {
        margin-left: 0;
        margin-top: .4rem;
    }
}