.blog-workbench .blog-main { display: block; width: min(1000px, calc(100% - 40px)); margin: 28px auto 64px; padding: 0; color: #182338; }
.blog-workbench .marketing-start { width: auto; padding-inline: 16px; text-align: center; justify-content: center; line-height: 1.3; }
.blog-workbench .seo-breadcrumb { flex-wrap: wrap; }
.blog-main *, .blog-latest * { box-sizing: border-box; letter-spacing: 0; }
.blog-header { padding: 28px 0 30px; border-bottom: 1px solid #dce3eb; }
.blog-header h1 { max-width: 850px; margin: 10px 0 16px; font-size: 40px; line-height: 1.18; }
.blog-header > p { max-width: 750px; color: #435167; font-size: 18px; line-height: 1.65; }
.blog-meta { color: #536276; font-size: 14px; line-height: 1.6; }
.blog-label { color: #126e5c; font-weight: 700; font-size: 14px; }
.blog-main a:not(.seo-button), .blog-latest a { color: #126e5c; text-underline-offset: 3px; }
.blog-main a:focus-visible, .blog-latest a:focus-visible { outline: 3px solid #247bd4; outline-offset: 4px; }
.blog-entry { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center; padding: 30px 0; border-bottom: 1px solid #dce3eb; }
.blog-entry img { width: 100%; height: 170px; object-fit: contain; background: #fff; }
.blog-entry h2 { font-size: 25px; line-height: 1.3; margin: 8px 0 10px; }
.blog-entry p { color: #435167; line-height: 1.7; margin: 0; }
.blog-article { width: 100%; max-width: 800px; min-width: 0; margin-inline: auto; }
.blog-article h2 { font-size: 26px; line-height: 1.3; margin: 32px 0 14px; }
.blog-article h3 { font-size: 20px; margin: 24px 0 10px; }
.blog-article p, .blog-article li { line-height: 1.8; color: #35465a; }
.blog-article li + li { margin-top: 9px; }
.blog-article figure { margin: 28px 0; }
.blog-article figure > img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; }
.blog-article figcaption { font-size: 14px; line-height: 1.6; margin-top: 10px; color: #536276; }
.blog-onpage { margin: 24px 0; padding: 0 0 20px; border-bottom: 1px solid #dce3eb; }
.blog-onpage ul { padding-left: 22px; }
.blog-table-wrap { overflow-x: auto; margin: 24px 0; }
.blog-table { border-collapse: collapse; width: 100%; text-align: left; }
.blog-table th, .blog-table td { padding: 12px; border-bottom: 1px solid #dce3eb; vertical-align: top; line-height: 1.65; }
.blog-article pre { overflow-x: auto; padding: 20px; border-left: 3px solid #16876e; background: #edf4f5; font-size: 14px; line-height: 1.7; }
.blog-padding-demo { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; margin: 24px 0; }
.blog-padding-demo figure { margin: 0; text-align: center; }
.blog-padding-demo figure > img { width: 128px; height: 128px; border: 1px solid #8191a3; }
.blog-css-demo { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 0; }
.blog-css-demo .icon-frame { width: 64px; height: 64px; border: 1px solid #8191a3; }
.blog-css-demo .icon-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.blog-next { padding: 24px 0; margin-top: 30px; border-top: 1px solid #dce3eb; }
.blog-media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0; }
.blog-media-pair figure { margin: 0; padding: 20px; background: #f1f5f7; }
.blog-media-pair figure > img { width: 100%; height: 220px; object-fit: contain; }
.blog-media-pair .blog-demo-dark { background: #20252b; }
.blog-media-pair .blog-demo-dark figcaption { color: #e4ebef; }
.blog-size-demo { display: flex; flex-wrap: wrap; align-items: end; gap: 32px; margin: 24px 0; }
.blog-size-demo figure { margin: 0; text-align: center; }
.blog-size-demo img[width="16"] { width: 16px; height: 16px; }
.blog-size-demo img[width="24"] { width: 24px; height: 24px; }
.blog-size-demo img[width="32"] { width: 32px; height: 32px; }
.blog-next .seo-actions { flex-wrap: wrap; }
.blog-next .seo-button { white-space: normal; }
.blog-latest { padding: 30px 0; margin-top: 28px; border-top: 1px solid #dce3eb; text-align: left; }
.blog-latest h2 { font-size: 26px; line-height: 1.3; margin: 0 0 16px; }
.blog-latest ul { display: grid; gap: 16px; padding-left: 22px; line-height: 1.6; }
@media (max-width: 640px) {
  .blog-media-pair { grid-template-columns: minmax(0, 1fr); }
  .blog-workbench .blog-main { width: calc(100% - 32px); }
  .blog-header h1 { font-size: 32px; overflow-wrap: anywhere; }
  .blog-header > p { font-size: 17px; }
  .blog-entry { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .blog-entry img { height: 180px; }
  .blog-entry h2, .blog-article h2, .blog-latest h2 { font-size: 23px; }
}