.detail-page__article[data-example] { max-width: 1200px; }
.example-detail { margin-top: 48px; color: var(--muted); line-height: 1.8; }
.example-detail__sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.example-detail h2 { margin: 0 0 14px; color: var(--text, #e8f1f5); font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.25; letter-spacing: -.025em; }
.example-detail p { margin: 0; }
.example-detail__formula { margin: 40px 0 64px; padding: 24px 28px; border: 1px solid #23404c; border-radius: 16px; background: #0a151c; }
.example-detail__formula span { display: block; margin-bottom: 10px; color: var(--cyan); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.example-detail__formula p { color: #dceaf0; overflow-wrap: anywhere; }
.example-detail__screens > p { margin-bottom: 28px; }
.example-detail figure { margin: 0 0 36px; overflow: hidden; border: 1px solid #23343e; border-radius: 16px; background: #080e16; }
.example-detail figure a { display: block; }
.example-detail figure img { display: block; width: 100%; height: auto; }
.example-detail figcaption { display: flex; gap: 18px; padding: 20px 24px; border-top: 1px solid #23343e; color: #b5c7d1; font-size: .9rem; line-height: 1.6; }
.example-detail figcaption span { color: var(--cyan); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .example-detail__sections { grid-template-columns: 1fr; gap: 28px; }
  .example-detail__formula { padding: 20px; margin-bottom: 40px; }
  .example-detail figcaption { padding: 16px; gap: 12px; }
}

.content-gallery--example { grid-template-columns: 1fr; }
.content-gallery--example figure img { width: 100%; height: auto; object-fit: contain; }

/* Reading rhythm and uncropped screenshots on detail pages. */
.detail-page .detail-page__back { margin-bottom: 28px; }
.detail-page .detail-page__article > header { margin-bottom: 28px; }
.detail-page .rich-content { line-height: 1.65; }
.detail-page .rich-content p { margin: 0 0 16px; }
.detail-page .rich-content h2, .detail-page .rich-content h3 { margin: 28px 0 12px; font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.3; }
.detail-page .example-detail { margin-top: 24px; line-height: 1.65; }
.detail-page .example-detail__sections { display: block; }
.detail-page .example-detail__sections section { margin-bottom: 16px; }
.detail-page .example-detail__formula { margin: 24px 0 28px; }
.detail-page .example-detail__formula > span { display: block; }
.detail-page .content-gallery { margin-top: 28px; }
.detail-page .content-gallery figure img, .detail-page .article-cover img, .detail-page .example-detail figure img { width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; transform: none; }
.detail-page .content-gallery figure:hover img { transform: none; }
.detail-page .math-formula { margin: 16px 0 24px; padding: 16px 20px; border: 1px solid #23404c; border-radius: 12px; background: #0a151c; color: #dceaf0; overflow-x: auto; }
.detail-page .math-formula .katex-display { margin: .4em 0; text-align: left; }
.detail-page .math-formula .katex-display > .katex { text-align: left; white-space: nowrap; }
@media (max-width: 700px) {
  .detail-page .math-formula { padding: 12px; font-size: .9rem; }
}