/* 公開首頁使用社群的深淺主題；所有規則限定在首頁內容。 */
.public-home { --home-gap: 48px; }
.public-home .home-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .9fr); align-items: center; gap: 48px; padding: 28px 0 46px; }
.public-home .home-hero h1 { font-size: clamp(30px, 3.5vw, 43px); line-height: 1.4; margin: 14px 0 20px; letter-spacing: -.045em; }
.public-home p { color: var(--muted-strong); }
.public-home .home-hero-lead { font-size: 15px; line-height: 1.95; max-width: 570px; margin: 0; }
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; margin-top: 28px; }
.public-home .home-reading-shortcut { display: none; }
.public-home .home-hero-note { font-size: 11px; color: var(--muted); margin-top: 18px; }
.public-home .home-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--brand-strong); font-size: 12px; line-height: 1.8; }
.home-example { min-width: 0; border: 1px solid var(--brand-line); border-radius: 18px; padding: 26px; background: linear-gradient(140deg, var(--brand-soft), var(--surface)); }
.home-example-top { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--muted); }
.home-example-top > span:first-child { color: var(--brand-strong); letter-spacing: .08em; }
.public-home #home-example-title { font-size: 13px; color: var(--text); margin: 22px 0 16px; }
.home-example-tag { padding: 18px; border-left: 3px solid var(--brand-strong); border-radius: 4px 10px 10px 4px; background: var(--surface-raised); }
.home-example-tag > span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 10px; }
.home-example-tag code { font: inherit; font-size: clamp(17px, 1.8vw, 22px); font-weight: 700; line-height: 1.65; overflow-wrap: anywhere; }
.home-example-tag b { color: #c6ee63; font-weight: inherit; }
.home-example-tag em { color: #79d7ff; font-style: normal; }
html[data-theme="light"] .home-example-tag b { color: #547b0a; }
html[data-theme="light"] .home-example-tag em { color: #086e9c; }
.home-example-values { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0; }
.home-example-values dt { color: var(--muted); font-size: 10px; margin-bottom: 7px; }
.home-example-values dd { margin: 0; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-example-values dd span { font-size: 12px; color: var(--muted-strong); font-weight: 400; }
.public-home .home-example-note { color: var(--muted); font-size: 11px; line-height: 1.85; margin: 0 0 16px; }
.home-highlights { display: grid; grid-template-columns: repeat(3, 1fr); padding: 22px 0; border-block: 1px solid var(--line); margin-bottom: 52px; }
.home-highlights > div { padding: 0 26px; border-left: 1px solid var(--line); }
.home-highlights > div:first-child { padding-left: 0; border: 0; }
.home-highlights span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.home-highlights strong { font-size: 13px; font-weight: 600; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--home-gap); }
.home-main-content { min-width: 0; }
.home-section { padding: 0 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.home-section-heading { display: flex; gap: 14px; align-items: baseline; margin-bottom: 20px; }
.home-section-heading > span { color: var(--brand-strong); font-size: 11px; font-variant-numeric: tabular-nums; }
.home-section h2, .home-reading h2, .home-start h2 { font-size: 22px; font-weight: 650; line-height: 1.5; letter-spacing: -.025em; margin: 0; }
.home-section > p { font-size: 13px; line-height: 1.95; margin: 14px 0 20px; }
.public-home .home-section-lead { color: var(--text); font-size: 16px; }
.home-data-types { display: grid; gap: 18px; margin: 28px 0 20px; }
.home-data-types article { padding-left: 16px; border-left: 2px solid var(--brand-line); }
.home-section h3 { font-size: 14px; font-weight: 600; margin: 0 0 7px; line-height: 1.65; }
.home-data-types p, .home-feature-grid p, .home-steps p { font-size: 12px; line-height: 1.85; margin: 0; }
.home-steps { list-style: none; counter-reset: home-step; padding: 0; margin: 28px 0; display: grid; gap: 22px; }
.home-steps li { position: relative; padding-left: 44px; counter-increment: home-step; }
.home-steps li::before { content: counter(home-step, decimal-leading-zero); position: absolute; left: 0; top: 2px; color: var(--brand-strong); font-size: 11px; padding-top: 3px; border-top: 1px solid var(--brand-line); width: 26px; }
.public-home .home-callout { padding: 18px 20px; background: var(--surface-soft); border-radius: 10px; font-size: 12px; }
.home-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; margin-top: 28px; }
.home-feature-grid article { padding-top: 18px; border-top: 1px solid var(--line); }
.home-feature-grid h3 { font-size: 13px; }
.home-reading { min-width: 0; }
.home-reading-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.home-reading-heading h2 { margin-top: 10px; }
.home-reading-heading p { font-size: 12px; line-height: 1.9; margin-bottom: 0; }
.public-home .home-reading-link { display: grid; grid-template-columns: 22px minmax(0, 1fr) 12px; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.home-reading-link strong { display: block; font-size: 13px; line-height: 1.75; font-weight: 600; }
.home-reading-link small { display: block; font-size: 11px; line-height: 1.85; color: var(--muted); margin-top: 7px; }
.home-reading-link > span:first-child, .home-reading-link > span:last-child { font-size: 10px; color: var(--brand-strong); line-height: 2.2; }
.public-home .home-community-link { display: grid; gap: 9px; margin-top: 26px; padding: 20px; border: 1px solid var(--brand-line); border-radius: 12px; background: var(--brand-soft); }
.home-community-link strong { font-size: 13px; font-weight: 600; }
.home-community-link span { font-size: 11px; line-height: 1.9; color: var(--muted-strong); }
.home-faq details { border-top: 1px solid var(--line); }
.home-faq summary { font-size: 13px; font-weight: 500; padding: 18px 26px 18px 0; cursor: pointer; line-height: 1.7; }
.home-faq summary::marker { color: var(--brand-strong); }
.home-faq p { font-size: 12px; line-height: 1.95; margin: 0 0 22px; }
.home-start { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px; border: 1px solid var(--brand-line); border-radius: 16px; background: var(--brand-soft); }
.home-start h2 { margin: 10px 0; }
.home-start p { margin: 0; font-size: 12px; line-height: 1.8; }
.home-start .community-button { flex-shrink: 0; }
.home-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; font-size: 11px; color: var(--muted); }
@media (max-width: 1000px) {
  .public-home { --home-gap: 32px; }
  .public-home .home-hero { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); }
  .home-example { padding: 20px; }
  .home-layout { grid-template-columns: minmax(0, 1fr) 250px; }
}
@media (max-width: 760px) {
  .public-home .home-hero { grid-template-columns: minmax(0, 1fr); padding-top: 8px; gap: 30px; }
  .public-home .home-hero h1 { font-size: 32px; }
  .home-example { max-width: 540px; width: 100%; }
  .home-layout { grid-template-columns: minmax(0, 1fr); }
  .public-home .home-reading-shortcut { display: inline-flex; }
  .home-reading nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .home-reading-heading p br { display: none; }
  .home-highlights > div { padding-inline: 12px; }
  .home-highlights strong { font-size: 11px; }
  .home-section h2, .home-start h2 { font-size: 20px; }
  .home-start { padding: 26px; }
}
@media (max-width: 480px) {
  .public-home .home-hero h1 { font-size: 28px; }
  .public-home .home-hero-lead { font-size: 13px; }
  .home-highlights { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .home-highlights > div, .home-highlights > div:first-child { display: flex; align-items: baseline; gap: 20px; padding: 0; border: 0; }
  .home-highlights span { margin: 0; min-width: 48px; }
  .home-highlights strong { font-size: 12px; }
  .home-reading nav, .home-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .home-reading-link small { max-width: 330px; }
  .home-start { align-items: flex-start; flex-direction: column; }
  .home-section-heading { gap: 10px; }
  .home-section h2 { font-size: 19px; }
}