.topic-directory-main{padding-block:var(--space-24) var(--space-64)}.topic-directory-card small{color:var(--color-muted);margin:0}.topic-directory-grid{gap:var(--space-16);margin-top:var(--space-20);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.topic-directory-card{align-items:center;gap:var(--space-20);min-width:0;padding:var(--space-24);border-radius:var(--radius-12);background:var(--color-surface);display:flex}.topic-directory-card>div{min-width:0}.topic-skeleton-icon{border-radius:var(--radius-12);flex:0 0 4rem;width:4rem;height:4rem}.topic-skeleton-copy{gap:var(--space-12);flex:1;min-width:0;display:grid}.topic-skeleton-count{flex:0 0 52px;width:52px}.topic-directory-card>img,.topic-directory-icon{border-radius:var(--radius-12);object-fit:cover;flex:0 0 4rem;width:4rem;height:4rem}.topic-directory-icon{background:var(--color-accent-soft);color:var(--color-accent-ink);place-items:center;display:grid}.topic-directory-card h2{text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-20);margin:0;line-height:1.4;overflow:hidden}.topic-directory-card h2 a{color:var(--color-ink);transition:color var(--motion-fast) var(--motion-ease-out)}@media (hover:hover){.topic-directory-card h2 a:hover{color:var(--color-brand-ink)}}.topic-directory-card p{-webkit-line-clamp:1;margin-block:var(--space-6) 0;color:var(--color-muted);font-size:var(--font-size-13);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.topic-directory-side{align-items:center;gap:var(--space-8);flex:none;margin-left:auto;display:flex}.topic-directory-side small{white-space:nowrap;font-size:var(--font-size-14)}.topic-directory-state{padding:var(--space-30);border-radius:var(--radius-12);background:var(--color-surface);text-align:center}.topic-directory-pagination{margin-top:var(--space-24)}.topic-directory-card{position:relative}.topic-directory-card h2 a:after{border-radius:var(--radius-12);content:"";position:absolute;inset:0}.topic-directory-arrow{color:var(--color-muted);flex-shrink:0}.topic-detail-main{padding-block:var(--space-24) var(--space-64)}.topic-detail-layout{margin-top:var(--space-12);grid-template-columns:minmax(0, 1fr) var(--layout-sidebar-width);align-items:start;gap:var(--layout-column-gap);display:grid}.topic-detail-column,.topic-detail-sidebar{gap:var(--space-12);min-width:0;display:grid}.topic-detail-sidebar{position:sticky;top:84px}.topic-detail-hero{justify-content:space-between;align-items:center;gap:var(--space-32);padding:var(--space-32);border-radius:var(--radius-panel);background:var(--color-surface);isolation:isolate;display:flex;position:relative;overflow:hidden}.topic-detail-background{z-index:-1;object-fit:cover;object-position:center;filter:brightness(.68);width:100%;height:100%;position:absolute;inset:0}.topic-detail-hero:has(.topic-detail-background:not([hidden])) .topic-detail-copy h1{color:var(--color-white);text-shadow:0 1px 6px var(--palette-rgb-0-0-0-35)}.topic-detail-hero:has(.topic-detail-background:not([hidden])) :is(.topic-detail-description,.topic-detail-stats){color:var(--palette-rgb-255-255-255-86);text-shadow:0 1px 4px var(--palette-rgb-0-0-0-35)}.topic-detail-hero:has(.topic-detail-background:not([hidden])) .topic-detail-stats strong{color:var(--color-white)}.topic-detail-hero:has(.topic-detail-background:not([hidden])) .topic-publish-button{border-color:var(--color-brand);background:var(--color-brand);color:var(--color-on-brand)}.topic-detail-identity{align-items:flex-start;gap:var(--space-24);min-width:0;display:flex}.topic-detail-identity>img,.topic-detail-identity>span{border-radius:var(--radius-panel);background:var(--color-accent-soft);width:4.5rem;height:4.5rem;color:var(--color-accent-ink);object-fit:cover;flex:0 0 4.5rem;place-items:center;display:grid}.topic-detail-copy{min-width:0}.topic-detail-copy h1{margin-block:0 var(--space-8);color:var(--color-ink);font-size:var(--text-page-title-size);line-height:var(--text-page-title-leading);font-weight:var(--weight-semibold);overflow-wrap:anywhere}.topic-detail-description{color:var(--color-muted);font-size:var(--text-body-size);line-height:var(--text-body-leading);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.topic-detail-stats{align-items:center;gap:var(--space-6);margin:var(--space-16) 0 0;color:var(--color-faint);font-size:var(--text-meta-size);line-height:var(--text-meta-leading);display:flex}.topic-detail-stats strong{color:var(--color-ink);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}.topic-publish-button,.topic-load-more,.topic-login-button{justify-content:center;align-items:center;gap:var(--space-8);min-height:var(--community-touch-target);padding:var(--space-10) var(--space-20);border-radius:var(--radius-control);background:var(--color-accent);color:var(--color-on-accent);font-size:var(--text-body-size);line-height:var(--text-body-leading);font-weight:var(--weight-semibold);white-space:nowrap;cursor:pointer;transition:background-color var(--motion-fast) var(--motion-ease-out), color var(--motion-fast) var(--motion-ease-out), border-color var(--motion-fast) var(--motion-ease-out);border:1px solid #0000;display:inline-flex}.topic-publish-button{flex:none}.topic-detail-feed{border-radius:var(--radius-panel);background:var(--color-surface);overflow:hidden}.topic-feed-tabs{height:52px;padding:0 var(--space-24);border-bottom:1px solid var(--color-line);align-items:center;gap:var(--space-24);display:flex}.topic-feed-tabs a{height:100%;color:var(--color-muted);font-size:var(--font-size-14);white-space:nowrap;align-items:center;display:flex;position:relative}.topic-feed-tabs a[aria-current]{color:var(--color-ink);font-weight:var(--weight-semibold)}.topic-feed-tabs a[aria-current]:after{border-radius:var(--radius-3);background:var(--color-accent);content:"";height:2px;position:absolute;bottom:-1px;left:0;right:0}.topic-feed-tabs>span{color:var(--color-faint);font-size:var(--font-size-12);margin-left:auto}.topic-load-more{margin:var(--space-24) auto;border-color:var(--color-action-border);background:var(--color-surface);color:var(--color-ink);font-weight:var(--weight-medium);display:flex}.topic-detail-feed .topic-directory-state{padding:var(--space-48) var(--space-24)}.topic-detail-state{margin-top:var(--space-20)}.topic-state-icon{border-radius:var(--radius-16);background:var(--color-accent-soft);width:4rem;height:4rem;color:var(--color-accent-ink);place-items:center;display:inline-grid}.topic-login-guide{min-height:280px;margin-top:var(--space-18);border-radius:var(--radius-10);background:var(--color-surface);color:var(--color-muted);text-align:center;place-content:center;justify-items:center;display:grid}.topic-login-guide h1{margin:var(--space-14) 0 0;color:var(--color-ink);font-size:var(--font-size-18)}.topic-login-guide p{margin:var(--space-6) 0 0;font-size:var(--font-size-13)}.topic-login-button{margin-top:var(--space-16);min-height:var(--control-height-md);padding:var(--space-8) var(--space-24);font-size:var(--font-size-14);border:none}.topic-publish-button:active,.topic-login-button:active{background:var(--color-accent-pressed)}.topic-load-more:disabled{border-color:var(--color-line);background:var(--color-disabled-bg);color:var(--color-disabled-ink);cursor:wait}@media (hover:hover){.topic-publish-button:hover,.topic-login-button:hover{background:var(--color-accent-hover)}.topic-load-more:hover:not(:disabled){border-color:var(--color-brand-ink);background:var(--color-brand-soft);color:var(--color-brand-ink)}.topic-feed-tabs a:hover:not([aria-current]){color:var(--color-brand-ink)}}.topic-directory-card a:focus-visible,.topic-feed-tabs a:focus-visible,.topic-publish-button:focus-visible,.topic-login-button:focus-visible,.topic-load-more:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}@media (max-width:640px){.topic-directory-grid{gap:var(--space-8);margin-top:var(--space-12);grid-template-columns:1fr}.topic-directory-card{gap:var(--space-12);padding:var(--space-16)}.topic-directory-card>img,.topic-directory-icon{border-radius:var(--radius-10);flex-basis:3rem;width:3rem;height:3rem}.topic-directory-card h2{font-size:var(--font-size-18)}.topic-directory-card p{-webkit-line-clamp:2;margin-block:var(--space-4) 0}.topic-directory-side small{font-size:var(--font-size-12)}.topic-detail-hero{align-items:flex-start;gap:var(--space-16);padding:var(--space-24) var(--space-16);flex-direction:column}.topic-detail-identity{column-gap:var(--space-12);row-gap:var(--space-4);grid-template-columns:3.5rem minmax(0,1fr);align-items:center;width:100%;display:grid}.topic-detail-identity>img,.topic-detail-identity>span{flex-basis:3.5rem;grid-area:1/1/3;width:3.5rem;height:3.5rem}.topic-detail-copy{display:contents}.topic-detail-copy h1{grid-column:2;align-self:start;margin:0}.topic-detail-description,.topic-detail-stats{margin-top:var(--space-8);grid-column:1/-1}.topic-publish-button{width:100%}.topic-detail-feed{margin-top:0;margin-inline:calc(var(--space-12) * -1);border-radius:0;overflow:visible}.topic-detail-feed .feed-post{margin:0 var(--space-16);padding:var(--space-24) 0;border:0;border-bottom:1px solid var(--color-line);border-radius:0}.topic-detail-feed .feed-post:last-of-type{border-bottom:0}.topic-detail-feed .feed-post-footer{align-items:stretch;gap:var(--space-8);flex-direction:column}.topic-detail-feed .feed-metrics{justify-content:space-between;gap:0;width:100%;padding-top:0}.topic-feed-tabs{z-index:var(--z-sticky);height:46px;padding:0 var(--space-16);gap:var(--space-26);background:var(--color-surface);position:sticky;top:0}.mobile-browse-shell[data-mobile-navigation=detail] .topic-feed-tabs{top:calc(var(--mobile-return-height) + env(safe-area-inset-top))}.topic-feed-tabs a[aria-current]:after{left:50%;right:auto;bottom:var(--space-3);border-radius:var(--radius-999);background:var(--color-brand);width:22px;height:3px;translate:-50%}.topic-feed-tabs>span{font-size:var(--text-label-size)}.topic-login-guide{margin-top:var(--space-24);padding:var(--space-32) var(--space-20)}}@media (max-width:900px){.topic-detail-layout{grid-template-columns:minmax(0,1fr)}.topic-detail-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));position:static}}@media (max-width:700px){.topic-detail-layout{margin-top:0}.topic-detail-sidebar{display:none}}@media (max-width:420px){.topic-feed-tabs{gap:var(--space-19)}}