/* MicroDraft Community Route Stylesheet (StyleX) */
.community-index, .community-article-page { padding: 56px 0 72px; }
.community-hero { padding: 18px 0 44px; border-bottom: 1px solid var(--line); }
.community-hero.compact { padding-bottom: 30px; }
.community-kicker { margin: 0 0 12px; color: var(--accent); font: 700 12px/1.4 ui-monospace, SFMono-Regular, monospace; letter-spacing: .08em; }
.community-hero h1, .article-header h1, .community-empty h1 { max-width: 760px; margin: 0; font-size: clamp(32px, 5vw, 54px); line-height: 1.18; letter-spacing: -.04em; text-wrap: balance; }
.community-search { display: flex; align-items: flex-end; gap: 8px; max-width: 520px; margin: 30px 0 0; }
.community-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.community-search input { min-width: 0; flex: 1; height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); font: inherit; }
.community-search button, .community-login-actions button { height: 40px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: #fff; font: 700 13px/1 inherit; cursor: pointer; }
.community-result { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

/* Article Grid & Cards */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0; }
.article-card { display: grid; grid-template-rows: auto 1fr; min-height: 228px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); text-decoration: none; }
.article-card-cover-slot { position: relative; display: block; width: 100%; aspect-ratio: 16/8; background: #edf1ec; overflow: hidden; border-radius: 3px 3px 0 0; }
.article-card-cover { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .18s ease; }
.article-card-cover-slot[data-cover-state="loading"] .article-card-cover { opacity: 0; }
.article-card-cover-slot[data-cover-state="loaded"] .article-card-cover { opacity: 1; }
.article-card-cover-slot[data-cover-state="error"] .article-card-cover { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.article-card-cover-skeleton { position: absolute; inset: 0; background: linear-gradient(105deg, #edf1ec 18%, #f7faf5 44%, #edf1ec 70%); background-size: 220% 100%; animation: cover-skeleton-shimmer 1.2s ease-in-out infinite; }
.article-card-cover-slot[data-cover-state="loaded"] .article-card-cover-skeleton,
.article-card-cover-slot[data-cover-state="error"] .article-card-cover-skeleton { display: none; }
.article-card-cover-error { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #edf1ec; color: #61706a; text-align: center; }
.article-card-cover-error img { width: 26px; height: 26px; opacity: .7; }
.article-card-cover-error span { font: 700 12px/1.4 ui-monospace, SFMono-Regular, monospace; letter-spacing: .06em; }
.article-card-cover-slot[data-cover-state="error"] .article-card-cover-error { display: flex; }
.article-card-body { display: flex; flex-direction: column; gap: 10px; padding: 15px; }
.article-card h2 { margin: 0; font-size: 18px; line-height: 1.45; }
.article-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.65; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.article-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--muted); font-size: 12px; }
.article-card-author { display: inline-flex; min-width: 0; align-items: center; gap: 6px; }
.article-card-author img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; background: #edf1ec; flex: 0 0 auto; }
.article-card-tags { display: flex; gap: 5px; overflow: hidden; }
.article-card-tags span { white-space: nowrap; }
.community-empty { padding: 88px 0; text-align: center; color: var(--muted); }
.community-empty h1 { margin: 0 auto 14px; color: var(--ink); font-size: 32px; }
.pagination { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.pagination a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); text-decoration: none; font-size: 13px; }

/* Article Reader (3-column layout) */
.article-header { width: min(100%, 520px); margin: 0 auto 34px; }
@media (min-width: 901px) { .article-header { width: min(100%, 740px); } }
.article-header h1 { font-size: clamp(32px, 5vw, 46px); }
.article-summary { margin: 18px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; text-wrap: pretty; }
.article-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.article-byline > span:not(:last-child)::after { content: ""; display: inline-block; width: 3px; height: 3px; margin-left: 12px; vertical-align: middle; background: #aeb8b2; }
.article-source-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-source-link img { display: block; flex: 0 0 auto; }
.article-three-col { display: grid; grid-template-columns: minmax(132px, 1fr) minmax(0, 520px) minmax(132px, 1fr); gap: 28px; align-items: start; }
.article-content { width: 100%; min-width: 0; background: var(--white); overflow-wrap: anywhere; }
.article-content > :first-child { margin-top: 0; }
.article-content > :last-child { margin-bottom: 0; }
.article-content img { max-width: 100%; height: auto; }
.article-content table { display: block; max-width: 100%; overflow-x: auto; }
.article-aside-left, .article-aside-right { position: sticky; top: 112px; min-width: 0; padding-top: 5px; }
.article-aside-right { position: static; display: grid; gap: 14px; align-content: start; max-width: 300px; }
.aside-title { margin: 0 0 10px; padding-left: 8px; border-left: 3px solid var(--ink); font: 700 11px/1.4 ui-monospace, SFMono-Regular, monospace; letter-spacing: .06em; }
.article-toc { display: grid; gap: 8px; }
.article-toc a { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.5; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.article-toc a:hover { color: var(--ink); text-decoration: underline; }
.article-toc a.is-active { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.article-toc .level-2 { padding-left: 8px; }
.article-toc .level-3 { padding-left: 16px; }
.article-toc .level-4 { padding-left: 24px; }
.article-toc .level-5 { padding-left: 32px; }
.article-author-card { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.article-author-banner { height: 56px; background: linear-gradient(120deg, var(--lime) 0%, var(--mint) 55%, var(--paper) 100%); }
.article-author-avatar { display: block; width: 64px; height: 64px; margin: -32px auto 0; border-radius: 50%; object-fit: cover; background: #edf1ec; border: 3px solid var(--white); box-shadow: 0 4px 14px rgba(20, 35, 30, .12); }
.article-author-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 0; }
.article-author-name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
.article-author-handle { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-author-stats { display: flex; gap: 12px; margin-top: 14px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.article-author-stat { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.article-author-stat strong { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.article-author-stat span { font-size: 11px; color: var(--muted); }
.article-author-qr { display: flex; align-items: center; gap: 10px; padding: 0 16px 14px; }
.article-author-qr img { display: block; width: 76px; height: 76px; border: 1px solid var(--line); border-radius: 4px; background: #fff; object-fit: contain; }
.article-author-qr span { font-size: 11px; line-height: 1.6; color: var(--muted); }
.article-reactions { display: flex; flex-wrap: wrap; gap: 8px; }
.reaction-button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.reaction-button:hover { border-color: var(--line-strong); background: var(--white); color: var(--ink); }
.reaction-button.is-active { border-color: var(--focus); background: var(--mint); color: var(--ink); }
.reaction-emoji { font-size: 15px; line-height: 1; }
.reaction-button small { font: 700 12px/1.7 ui-monospace, SFMono-Regular, monospace; font-variant-numeric: tabular-nums; }
.article-related-rail { display: grid; gap: 10px; margin-top: 106px; }
.related-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); text-decoration: none; }
.related-item-cover { width: 64px; height: 40px; border-radius: 3px; object-fit: cover; background: #edf1ec; }
.related-item-title { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.community-login-dialog { width: min(360px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 4px; padding: 0; background: var(--white); color: var(--ink); }
.community-login-dialog::backdrop { background: rgba(20, 35, 30, .35); }
.community-login-dialog form { padding: 22px; }
.community-login-dialog h2 { margin: 0; font-size: 20px; }
.community-login-dialog p { margin: 10px 0 20px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.community-login-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.community-login-actions a { color: var(--muted); font-size: 13px; }

@keyframes cover-skeleton-shimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .article-card-cover-skeleton { animation: none; }
}
@media (max-width: 900px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-three-col { grid-template-columns: minmax(0, 520px) minmax(150px, 1fr); justify-content: center; }
  .article-aside-left { display: none; }
  .article-aside-right { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 14px; }
  .article-reactions { gap: 10px 8px; }
}
@media (max-width: 600px) {
  .community-index, .community-article-page { padding: 34px 0 48px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-three-col { display: block; }
  .article-aside-right { display: block; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
  .article-header { margin-bottom: 28px; }
  .article-content { width: 100%; }
}

/* StyleX Compiled Community Rules */
@keyframes xu3vxyf-B{0%{background-position:130% 0;}100%{background-position:-30% 0;}}
.x10a8y8t:not(#\#){inset:0}
.x9r1u3d:not(#\#):not(#\#){border-color:transparent}
.x15klumf:not(#\#):not(#\#){border-color:var(--x1b7czt3)}
.xwf225k:not(#\#):not(#\#){border-color:var(--x1l4ao2w)}
.x1oqik8e:not(#\#):not(#\#){border-radius:var(--x1mv2yrm)}
.xym5rr1:not(#\#):not(#\#){border-radius:var(--xvfyttp)}
.x1y0btm7:not(#\#):not(#\#){border-style:solid}
.xmkeg23:not(#\#):not(#\#){border-width:1px}
.x98rzlu:not(#\#):not(#\#){flex:1}
.xou54vl:not(#\#):not(#\#){gap:16px}
.x33pbmt:not(#\#):not(#\#){gap:28px}
.x1j9xkj6:not(#\#):not(#\#){gap:7px}
.x167g77z:not(#\#):not(#\#){gap:8px}
.xb3r6kr:not(#\#):not(#\#){overflow:hidden}
.x1hl2dhg:not(#\#):not(#\#){text-decoration:none}
.xjzgv1s:hover:not(#\#):not(#\#){border-color:var(--x1l4ao2w)}
@media (max-width: 900px){.x1uax9pz.x1uax9pz:not(#\#):not(#\#){gap:18px}}
@media (max-width: 900px){.xsk92z9.xsk92z9:not(#\#):not(#\#){grid-column:1 / -1}}
.x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
.xuk3077:not(#\#):not(#\#):not(#\#){align-items:flex-end}
.x1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
.x1m9vv7p:not(#\#):not(#\#):not(#\#){animation-duration:1.2s}
.xa4qsjk:not(#\#):not(#\#):not(#\#){animation-iteration-count:infinite}
.xka6nh1:not(#\#):not(#\#):not(#\#){animation-name:xu3vxyf-B}
.x4hg4is:not(#\#):not(#\#):not(#\#){animation-timing-function:ease-in-out}
.x10gokpc:not(#\#):not(#\#):not(#\#){aspect-ratio:16 / 8}
.x1cnvhd4:not(#\#):not(#\#):not(#\#){background-color:#edf1ec}
.xjbqb8w:not(#\#):not(#\#):not(#\#){background-color:transparent}
.x1ptm6bz:not(#\#):not(#\#):not(#\#){background-color:var(--x130gbrw)}
.x1h70ygh:not(#\#):not(#\#):not(#\#){background-color:var(--x1b7czt3)}
.x658q5q:not(#\#):not(#\#):not(#\#){background-size:220% 100%}
.x1f7m26b:not(#\#):not(#\#):not(#\#){color:#ffffff}
.xn0bfad:not(#\#):not(#\#):not(#\#){color:var(--x1gqaozl)}
.x1n10r6u:not(#\#):not(#\#):not(#\#){color:var(--x30uskn)}
.x1ypdohk:not(#\#):not(#\#):not(#\#){cursor:pointer}
.x1lliihq:not(#\#):not(#\#):not(#\#){display:block}
.x78zum5:not(#\#):not(#\#):not(#\#){display:flex}
.xrvj5dj:not(#\#):not(#\#):not(#\#){display:grid}
.x1xyhgq5:not(#\#):not(#\#):not(#\#){font-family:var(--xhjbjr3)}
.xfifm61:not(#\#):not(#\#):not(#\#){font-size:12px}
.x4z9k3i:not(#\#):not(#\#):not(#\#){font-size:13px}
.x1xlr1w8:not(#\#):not(#\#):not(#\#){font-weight:700}
.xyftypr:not(#\#):not(#\#):not(#\#){grid-template-columns:16px minmax(0,1fr) auto}
.x1hvnuvg:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(132px,1fr) minmax(0,520px) minmax(132px,1fr)}
.x185a7wo:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(3,minmax(0,1fr))}
.xogrr9c:not(#\#):not(#\#):not(#\#){grid-template-rows:auto 1fr}
.x9pfba7:not(#\#):not(#\#):not(#\#){letter-spacing:.08em}
.x37zpob:not(#\#):not(#\#):not(#\#){line-height:1.4}
.x10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}
.x1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}
.x7wzq59:not(#\#):not(#\#):not(#\#){position:sticky}
.xdpxx8g:not(#\#):not(#\#):not(#\#){text-align:left}
.xl66ta0:hover:not(#\#):not(#\#):not(#\#){background-color:var(--x130gbrw)}
.xmotatz:hover:not(#\#):not(#\#):not(#\#){color:var(--x1b7czt3)}
@media (max-width: 600px){.x33ww9s.x33ww9s:not(#\#):not(#\#):not(#\#){display:block}}
@media (max-width: 900px){.x1dtk984.x1dtk984:not(#\#):not(#\#):not(#\#){display:grid}}
@media (max-width: 900px){.xzd29fr.xzd29fr:not(#\#):not(#\#):not(#\#){display:none}}
@media (max-width: 900px){.xz83zsu.xz83zsu:not(#\#):not(#\#):not(#\#){grid-template-columns:120px 1fr}}
@media (max-width: 600px){.x1nc4n6v.x1nc4n6v:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr}}
@media (max-width: 900px){.xxlbpm6.xxlbpm6:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,520px) minmax(150px,1fr)}}
@media (max-width: 900px){.xaclxhj.xaclxhj:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 900px){.xnjvy26.xnjvy26:not(#\#):not(#\#):not(#\#){justify-content:center}}
@media (max-width: 900px){.x1twvnst.x1twvnst:not(#\#):not(#\#):not(#\#){position:static}}
.x1s6q92g:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--x1l4ao2w)}
.x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
.xso031l:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px}
.x1vqgdyp:not(#\#):not(#\#):not(#\#):not(#\#){height:40px}
.xat24cr:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:0}
.xod5an3:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:12px}
.x1iymm2a:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:32px}
.xdj266r:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0}
.x11fxgd9:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:30px}
.xg87l8a:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:32px}
.x1lwm3bp:not(#\#):not(#\#):not(#\#):not(#\#){max-width:520px}
.x18ul126:not(#\#):not(#\#):not(#\#):not(#\#){min-height:228px}
.x1rj1pf4:not(#\#):not(#\#):not(#\#):not(#\#){min-height:35px}
.xeuugli:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}
.x1m7pmia:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:44px}
.x10b6aqq:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:6px}
.x1j3kn9t:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:72px}
.x6pqhf1:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:11px}
.xzjhap9:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:14px}
.xp5pvr8:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:7px}
.x1nnee3q:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:11px}
.x19tmk5i:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:14px}
.x82l30n:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:7px}
.x109j2v6:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:18px}
.xn2ks54:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:56px}
.x123j3cw:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:5px}
.x1yrsyyn:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:6px}
.xu537pa:not(#\#):not(#\#):not(#\#):not(#\#){top:112px}
.xh8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
@media (max-width: 600px){.x16yf2l.x16yf2l:not(#\#):not(#\#):not(#\#):not(#\#){border-top-color:var(--x1l4ao2w)}}
@media (max-width: 600px){.x196uliq.x196uliq:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:solid}}
@media (max-width: 600px){.x1yvlec8.x1yvlec8:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}}
@media (max-width: 600px){.xj26bsr.xj26bsr:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:28px}}
@media (max-width: 600px){.xmp2vk3.xmp2vk3:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:48px}}
@media (max-width: 600px){.x1eu83c4.x1eu83c4:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:22px}}
@media (max-width: 600px){.x17798vx.x17798vx:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:34px}}