/* Shared navigation, readable copy, and the homepage product showcase. */
[hidden] { display: none !important; }
.reading-copy, .md-reader { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: normal; }
.md-reader { font-size: 1.0625rem; line-height: 1.9; }
.md-reader h1, .md-reader h2, .md-reader h3, .md-reader h4, .md-reader code, .md-reader pre { font-family: "Cascadia Code", ui-monospace, monospace; }
.md-reader pre code { font-size: .875rem; }
header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-menu { display: none; }
/* Explicit hero spacing keeps the layout independent of generated utilities. */
.home-hero { padding: 4.5rem 0; }
.home-eyebrow { margin-bottom: 2rem; }
.home-headline { font-size: 4.5rem; line-height: 1.12; }
.home-intro { max-width: 38rem; margin-top: 1.75rem; font-size: 1.125rem; line-height: 1.85; }
.home-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.home-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .875rem 1.25rem; font-size: .8125rem; line-height: 1.5; }
@media (max-width: 639px) {
  .home-hero { padding: 4rem 0 4.5rem; }
  .home-eyebrow { margin-bottom: 2rem; }
  .home-headline { font-size: clamp(2.25rem, 10vw, 3rem); line-height: 1.15; }
  .home-intro { margin-top: 2rem; font-size: 1rem; line-height: 1.8; }
  .home-actions { margin-top: 2rem; gap: .875rem; }
}
.showcase-list { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.product-showcase { display: grid; grid-template-columns: 1.15fr 1fr; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); overflow: hidden; }
.showcase-image { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 1.5rem; background: hsl(var(--background)); border-right: 1px solid hsl(var(--border)); }
.showcase-image img { width: 100%; height: 280px; object-fit: contain; }
.showcase-copy { padding: 2.5rem; align-self: center; min-width: 0; }
.showcase-platform { color: hsl(var(--primary)); font-size: .75rem; }
.showcase-copy h3 { margin-top: .75rem; font-size: 1.6rem; font-weight: 650; letter-spacing: -.04em; }
.showcase-description { margin-top: 1rem; font-size: 1rem; line-height: 1.75; color: hsl(var(--foreground)); }
.showcase-note { margin-top: .75rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.showcase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; font-size: .75rem; }
.download-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .75rem 1rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; }
.download-link:hover { opacity: .85; }
.explore-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: hsl(var(--primary)); }
.explore-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; font-size: .875rem; color: hsl(var(--primary)); list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary:focus-visible { outline: 1px solid hsl(var(--primary)); outline-offset: 3px; }
  .mobile-menu[open] summary span[aria-hidden] { transform: rotate(45deg); }
  .mobile-menu nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: .75rem 1.25rem; background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); box-shadow: 0 12px 20px #0004; }
  .mobile-menu nav a { justify-content: flex-start; width: 100%; padding: .5rem; font-size: .875rem; }
  .product-showcase { grid-template-columns: 1fr; }
  .showcase-image { border-right: 0; border-bottom: 1px solid hsl(var(--border)); }
  .showcase-image img { height: 240px; }
  .showcase-copy { padding: 1.5rem; }
}

/* Personal home: a clear path from featured work to writing and contact. */
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.skip-link:focus { top: 1rem; }
#main-content:focus { outline: none; }
.home-section { padding: 4rem 0; border-bottom: 1px solid hsl(var(--border)); scroll-margin-top: 5rem; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.25rem; }
.home-section-heading h2 { margin-top: .75rem; font-size: 1.75rem; line-height: 1.3; font-weight: 650; letter-spacing: -.04em; }
.home-section-heading > a, .follow-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .75rem; color: hsl(var(--primary)); }
.home-section-heading > a { flex-shrink: 0; }
.home-section-heading > a:hover, .follow-links a:hover, .writing-item:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.section-intro { margin: 1rem 0 1.75rem; max-width: 40rem; color: hsl(var(--muted-foreground)); font-size: 1rem; line-height: 1.75; }
.maintained-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.maintained-grid > a { display: block; }
.maintained-grid > a > span { margin-bottom: 1rem; }
.maintained-grid > a > svg, .maintained-grid code { display: none; }
.project-status { margin-top: .75rem; font-size: .6875rem; color: hsl(var(--primary)); }
.showcase-status { color: hsl(var(--muted-foreground)); }
.writing-item { display: grid; grid-template-columns: 7rem 1fr 1rem; align-items: baseline; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid hsl(var(--border)); }
.writing-item time { color: hsl(var(--muted-foreground)); font-size: .75rem; }
.writing-item h3 { font-size: .9375rem; line-height: 1.65; }
.writing-item > span { color: hsl(var(--primary)); }
.follow-note { margin-top: 2rem; padding: 1.5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.follow-note h3 { font-size: .9375rem; font-weight: 600; }
.follow-note p { margin-top: .75rem; max-width: 40rem; color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.9; }
.follow-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .75rem; }
.catalog-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid hsl(var(--border)); }
.catalog-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .75rem; color: hsl(var(--primary)); }
.catalog-nav a:hover { text-decoration: underline; }
#wechat { scroll-margin-top: 6rem; }
@media (max-width: 767px) {
  .maintained-grid { grid-template-columns: 1fr; }
  .home-section-heading { align-items: start; flex-direction: column; gap: .5rem; }
  .home-section-heading h2 { font-size: 1.5rem; }
  .writing-item { grid-template-columns: 1fr 1rem; gap: .5rem; }
  .writing-item time { grid-column: 1 / -1; }
}

/* Optional product pricing, sourced from the product catalog. */
.product-pricing { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid hsl(var(--border)); scroll-margin-top: 6rem; }
.product-pricing h2 { margin-top: 1rem; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.3; font-weight: 650; letter-spacing: -.04em; }
.pricing-intro { margin-top: 1rem; line-height: 1.8; color: hsl(var(--muted-foreground)); }
.pricing-availability { margin-top: 1.5rem; padding: 1rem; border-left: 2px solid hsl(var(--primary)); background: hsl(var(--card)); font-size: .875rem; line-height: 1.8; }
.pricing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.pricing-plan { padding: 1.5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.pricing-status { font-size: .6875rem; line-height: 1.6; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--primary)); }
.pricing-plan h3 { margin-top: .75rem; font-size: 1.125rem; font-weight: 600; }
.pricing-amount { margin-top: 1.5rem; font-size: 2.5rem; line-height: 1.2; font-weight: 650; letter-spacing: -.05em; }
.pricing-billing { margin-top: .5rem; font-size: .75rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.pricing-description { margin-top: 1.25rem; line-height: 1.8; font-size: .9375rem; }
.pricing-note { margin-top: .75rem; line-height: 1.8; font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.pricing-comparison { width: 100%; margin-top: 2.5rem; table-layout: fixed; border-collapse: collapse; font-size: .875rem; line-height: 1.7; }
.pricing-comparison caption { padding-bottom: 1rem; text-align: left; font-size: 1rem; font-weight: 600; }
.pricing-comparison th, .pricing-comparison td { padding: 1rem .5rem; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.pricing-comparison th:first-child { width: 56%; padding-left: 0; }
.pricing-comparison tbody th { font-weight: 400; }
.pricing-comparison td { color: hsl(var(--muted-foreground)); }
.pricing-details { margin-top: 2rem; display: grid; gap: 1.5rem; font-size: .875rem; line-height: 1.8; }
.pricing-details h3 { font-weight: 600; }
.pricing-details p { margin-top: .375rem; color: hsl(var(--muted-foreground)); }
@media (max-width: 639px) {
  .pricing-plans { grid-template-columns: 1fr; }
  .pricing-comparison { font-size: .8125rem; }
  .pricing-comparison th:first-child { width: 48%; }
  .pricing-comparison th, .pricing-comparison td { padding-top: .875rem; padding-bottom: .875rem; }
}

/* Translation controls belong to the article, not the site navigation. */
.post-article .lang-switch button { min-width: 2.5rem; min-height: 36px; font-size: .75rem; }
@media (min-width: 640px) { header .desktop-nav { margin-left: auto; } }