.xl-nav{grid-template-columns:repeat(6,minmax(0,1fr))}.xl-design-icon{display:inline-flex;flex:none}.xl-design-dark{display:none}:root[data-theme=dark] .xl-design-light{display:none}:root[data-theme=dark] .xl-design-dark{display:block}.xl-breadcrumb{display:flex;align-items:center;gap:2px;font-size:16px;line-height:24px;color:var(--text-primary);flex-wrap:wrap}.xl-breadcrumb a{color:var(--text-secondary)}.xl-breadcrumb .xl-design-icon img{width:11px;height:11px}.xl-article-detail{padding-top:32px;padding-bottom:80px}.xl-article-main{width:858px;max-width:100%;margin:32px auto 0;display:flex;flex-direction:column;gap:24px}.xl-article-heading h1{font-size:32px;font-weight:600;line-height:45px;margin:0 0 24px}.xl-article-author{display:flex;gap:12px;align-items:center;min-height:48px;font-size:16px}.xl-article-author-avatar{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--brand-blue-default);background:var(--brand-blue-subtle)}.xl-article-author p{display:flex;gap:16px;margin:4px 0 0;font-size:14px;color:var(--text-tertiary)}.xl-article-notice{padding:24px;border-radius:12px;background:var(--bg-surface);display:flex;flex-direction:column;gap:16px;font-size:16px;line-height:24px;color:var(--text-secondary);overflow-wrap:anywhere}.xl-article-notice p{margin:0}.xl-article-notice a{color:var(--brand-blue-default)}.xl-article-main .article{font-size:16px;line-height:1.6;color:var(--text-secondary);display:flex;flex-direction:column;gap:24px;overflow-wrap:anywhere}.xl-article-main .article p{margin:0}.xl-article-city{position:relative;aspect-ratio:858/420;width:100%;overflow:hidden;border-radius:12px}.xl-article-city img{position:absolute;left:0;top:0;width:858px;height:420px;max-width:none;transform:scale(var(--city-scale,1));transform-origin:0 0}.xl-article-tags{display:flex;gap:8px;flex-wrap:wrap}.xl-article-tags a{padding:8px 16px;border-radius:6px;font-size:14px;line-height:20px;background:var(--bg-surface);color:var(--text-secondary)}.xl-article-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--text-tertiary)}.xl-article-actions button,.xl-article-actions>a{border:0;border-radius:100px;background:var(--bg-surface);color:var(--text-secondary);padding:8px 16px;display:flex;align-items:center;gap:6px;line-height:20px}.xl-article-actions img{width:20px;height:20px}.xl-article-favorite[aria-pressed=true]{color:var(--brand-blue-default)}.xl-article-related h2,.xl-article-announcement h2,.xl-article-comments h2{font-size:24px;line-height:34px;font-weight:600;margin:0 0 24px}.xl-article-related>div{background:var(--bg-surface);border-radius:12px;padding:8px 0}.xl-article-related a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 20px;font-size:16px;color:var(--text-primary)}.xl-article-related img{width:11px;height:11px}.xl-article-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:24px}.xl-article-prevnext>a,.xl-article-prevnext>div{padding:20px;background:var(--bg-surface);border-radius:12px;color:var(--text-primary);min-width:0}.xl-article-prevnext span{display:block;font-size:14px;line-height:20px;color:var(--text-tertiary);margin-bottom:8px}.xl-article-prevnext p{margin:0;font-size:16px;line-height:24px}.xl-article-comments .xl-film-compose{display:flex;gap:12px;align-items:center;background:var(--bg-surface);border-radius:100px;padding:4px 16px 4px 4px;min-height:68px;margin:0}.xl-article-compose-avatar{width:60px;height:60px;position:relative;flex:none;overflow:hidden;border-radius:50%;mask-image:var(--avatar-mask);mask-size:60px 60px}.xl-avatar-background,.xl-avatar-ring{position:absolute;inset:0}.xl-avatar-background img,.xl-avatar-ring img{width:60px;height:60px}.xl-avatar-person{position:absolute;width:73.333px;height:97.778px;max-width:none;left:-8.33px;top:-1.67px}.xl-article-comments .xl-film-compose textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;height:24px;padding:0;font-size:16px;line-height:24px;color:var(--text-primary)}.xl-article-comments .xl-film-compose textarea::placeholder{color:var(--text-tertiary)}.xl-article-comments .xl-film-compose>button{border:0;border-radius:100px;padding:8px 16px;font-size:14px;line-height:20px;flex:none}.xl-article-comment-list:empty{margin:0}.xl-article-comments [data-comment-status]{display:flex;align-items:center;justify-content:center;min-height:88px;margin:0;color:var(--text-tertiary);font-size:14px}.xl-article-comments button{cursor:pointer}.xl-article-comments .xl-film-load-more{font-size:12px!important}.xl-article-detail button:disabled{opacity:.5}@media(max-width:900px){.xl-nav{overflow:auto;grid-template-columns:repeat(6,minmax(80px,1fr))}}@media(max-width:520px){.xl-article-detail{padding-top:24px;padding-bottom:48px}.xl-article-heading h1{font-size:26px;line-height:36px}.xl-article-notice{padding:16px}.xl-article-prevnext{gap:12px}.xl-article-prevnext>a,.xl-article-prevnext>div{padding:16px}.xl-article-comments .xl-film-compose{gap:8px}.xl-article-comments .xl-film-compose textarea{font-size:14px}}
/* Shared detail rules must not reveal the alternate theme asset. */
.xl-article-detail .xl-design-dark{display:none!important}:root[data-theme=dark] .xl-article-detail .xl-design-light{display:none!important}:root[data-theme=dark] .xl-article-detail .xl-design-dark{display:block!important}

/* Article detail: Figma 2841:20161. Keep rich content within the reading column. */
.xl-article-main > *,
.xl-article-author > div { min-width: 0; }
.xl-article-heading h1,
.xl-article-author,
.xl-article-prevnext p,
.xl-article-related a > span { overflow-wrap: anywhere; }
.xl-article-author-avatar { flex-shrink: 0; }
.xl-article-author p { flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
.xl-breadcrumb [aria-current="page"] { font-weight: 600; overflow-wrap: anywhere; }

/* The flex gap supplies paragraph spacing; legacy margins must not add to it. */
.xl-ui .xl-article-main .article p { margin: 0; }
.xl-article-main .article img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.xl-article-main .article .ql-video,
.xl-article-main .article .ql-video-mse { max-width: 100%; margin: 0; }
.xl-article-main .article a { color: var(--brand-blue-default); }
.xl-article-tags:empty { display: none; }
.xl-article-tags a { color: var(--text-primary); }
.xl-article-keywords { margin: 0; font-size: 14px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.xl-article-related a { line-height: 24px; }
.xl-article-related a > span:first-child { min-width: 0; }
.xl-article-compose-picture { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--bg-emphasis), var(--bg-media-placeholder-strong)); }
.xl-article-compose-picture img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xl-article-compose-ring { position: absolute; top: 0; left: 0; width: 60px; height: 60px; pointer-events: none; transform-origin: top left; }
.xl-article-compose-ring .xl-design-icon { display: block; }
/* Reuse video detail comment rows, reply trees and buttons without article overrides. */
.xl-article-comments h2 { margin: 0; }
.xl-article-comments .xl-article-comment-list { display: flex; flex-direction: column; margin: 0; }
.xl-article-comments > .xl-film-load-more { margin: 0 auto; }
.xl-article-comments .xl-article-comment-list:not(:has(.comment-item)) { display: none; }
.xl-article-comments [data-comment-status] { display: none; margin: 0; }
.xl-article-comment-list:not(:has(.comment-item)) + [data-comment-status] { display: flex; }
.xl-article-detail a:focus-visible,
.xl-article-detail button:focus-visible,
.xl-article-comments .xl-film-compose:focus-within {
    outline: 2px solid var(--brand-blue-default);
    outline-offset: 3px;
}
@media (max-width: 520px) {
    .xl-article-actions { gap: 8px; }
    .xl-article-counts { flex-basis: 100%; }
    .xl-article-comments .xl-film-compose { padding-right: 8px; }
    .xl-article-compose-avatar { width: 40px; height: 40px; }
    .xl-article-compose-ring { transform: scale(.6666667); }
    .xl-article-comments .xl-film-compose > button { padding: 8px 12px; }
}