/* Public explanations only. Editor and project canvas styles are independent. */
.public-reading { padding-bottom: 72px; }
.public-reading .breadcrumbs { margin-block: 30px 24px; }
.content-hero { padding-block: 24px 46px; max-width: 840px; }
.content-hero h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.55; letter-spacing: -.04em; margin: 16px 0 20px; }
.content-hero > p { font-size: 16px; color: var(--site-copy); max-width: 750px; }
.content-hero .hero-actions { margin-top: 26px; }
.reading-section { padding-block: 44px; border-top: 1px solid var(--site-border); scroll-margin-top: 24px; }
.reading-section h2 { margin: 0 0 20px; font-size: clamp(23px, 3vw, 30px); line-height: 1.6; letter-spacing: -.03em; }
.reading-section h3 { margin: 25px 0 10px; font-size: 19px; line-height: 1.7; }
.reading-section p, .reading-section li { color: var(--site-copy); font-size: 15px; line-height: 1.95; }
.reading-section p { max-width: 840px; }
.reading-section strong, .reading-section li::marker { color: var(--site-ink); }
.reading-section li + li { margin-top: 9px; }
.reading-section ul, .reading-section ol { padding-left: 1.5em; }
.reading-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.reading-grid > * { min-width: 0; }
.reading-grid h3:first-child { margin-top: 0; }
.capture { margin: 0; }
.capture img { display: block; width: 100%; height: auto; border: 1px solid var(--site-control-border); border-radius: 12px; background: var(--site-soft); box-shadow: 0 12px 35px var(--site-shadow); }
.capture figcaption { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--site-muted); }
.capture figcaption a { display: inline-block; }
.hero-visual .capture { margin-block: 10px; }
.hero-visual .capture img { border-radius: 10px; }
.template-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.template-showcase article { border: 1px solid var(--site-border); border-radius: 12px; overflow: hidden; background: var(--site-panel); }
.template-showcase .capture img { border: 0; border-bottom: 1px solid var(--site-border); border-radius: 0; box-shadow: none; }
.template-showcase .capture figcaption { margin: 10px 24px 0; }
.template-description { padding: 0 24px 26px; }
.template-description h3 { margin-top: 14px; }
.template-description p { font-size: 14px; }
.template-description .site-button { margin-top: 6px; }
.reading-note { padding: 18px 22px; border: 1px solid var(--site-border); border-radius: 10px; background: var(--site-blue-soft); color: var(--site-copy); font-size: 14px; margin-block: 24px; }
.reading-note > :first-child { margin-top: 0; }
.reading-note > :last-child { margin-bottom: 0; }
.reading-code { background: var(--site-soft); color: var(--site-ink); border: 1px solid var(--site-border); border-radius: 10px; padding: 20px; font-size: 13px; line-height: 1.9; overflow-x: auto; tab-size: 2; }
.reading-section :not(pre) > code { font-size: .9em; overflow-wrap: anywhere; }
.reading-toc { padding: 22px 28px; border: 1px solid var(--site-border); border-radius: 10px; background: var(--site-soft); margin-bottom: 40px; }
.reading-toc ol { columns: 2; column-gap: 40px; padding-left: 1.5em; margin-bottom: 0; }
.reading-toc li { break-inside: avoid; padding-block: 5px; font-size: 14px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--site-border); border-radius: 10px; margin-block: 24px; }
.table-scroll:focus-visible { outline: 3px solid var(--site-focus); outline-offset: 4px; }
.plan-table { border-collapse: collapse; width: 100%; min-width: 560px; text-align: left; font-size: 14px; }
.plan-table caption { text-align: left; padding: 16px 20px; font-weight: 650; background: var(--site-soft); }
.plan-table :is(th,td) { padding: 14px 20px; border-top: 1px solid var(--site-border); vertical-align: top; }
.plan-table th { color: var(--site-ink); font-weight: 650; }
.plan-table td { color: var(--site-copy); }
.plan-table thead { background: var(--site-soft); }
.faq-list { border-top: 1px solid var(--site-border); }
.faq-list details { padding-block: 19px; border-bottom: 1px solid var(--site-border); }
.faq-list summary { cursor: pointer; font-size: 16px; font-weight: 650; color: var(--site-ink); }
.faq-list details p { padding-inline: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 26px; }
.related-card { display: block; padding: 24px; border: 1px solid var(--site-border); border-radius: 11px; background: var(--site-panel); text-decoration: none; }
.related-card:hover { border-color: var(--site-blue); background: var(--site-blue-soft); }
.related-card strong { display: block; font-size: 17px; line-height: 1.6; color: var(--site-ink); }
.related-card > span { display: block; margin-top: 9px; color: var(--site-copy); font-size: 13px; line-height: 1.9; }
.next-action { border-top: 1px solid var(--site-border); padding-top: 40px; margin-top: 10px; }
.next-action h2 { font-size: 26px; margin-bottom: 12px; }
.next-action p { color: var(--site-copy); }
.site-nav { flex-wrap: wrap; row-gap: 8px; }
.header-inner { gap: 20px; }
.site-nav a { font-size: 12px; }
.footer-links { flex-wrap: wrap; }
@media (max-width: 1120px) {
  .header-inner { flex-wrap: wrap; padding-block: 18px; gap: 16px; }
  .site-nav { order: 3; width: 100%; margin: 0; gap: 9px 22px; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 800px) {
  .content-hero { padding-top: 12px; }
  .reading-grid, .template-showcase { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .reading-section { padding-block: 32px; }
  .reading-toc ol { columns: 1; }
  .site-nav a { padding-block: 4px; }
}
@media (max-width: 480px) {
  .public-reading .breadcrumbs { margin-top: 22px; }
  .content-hero h1 { font-size: 28px; }
  .content-hero > p { font-size: 15px; }
  .reading-toc, .reading-note { padding: 18px; }
  .reading-code { padding: 16px; font-size: 12px; }
  .header-tools { gap: 8px; }
  .header-tools .site-button.small { padding-inline: 10px; }
  .template-description { padding-inline: 20px; }
}