.article-callout{margin:28px 0;padding:20px 22px;border:1px solid rgba(104,121,227,.28);border-radius:14px;background:linear-gradient(135deg,rgba(104,121,227,.08),rgba(117,77,165,.06))}
.article-checklist{padding-left:22px}
.article-callout strong{color:var(--primary,#111);}
.article-checklist li{margin:8px 0}
.problem-card{margin:26px 0;padding:22px;border:1px solid rgba(104,121,227,.18);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.problem-card h3{margin-top:0}
.problem-card .fix{margin-top:14px;padding:14px 16px;border-left:4px solid #6879e3;background:rgba(104,121,227,.07)}
.article-hero-image{display:block;width:100%;height:auto;border-radius:18px;margin:0 0 30px;box-shadow:0 16px 40px rgba(0,0,0,.14)}
.code-note{font-size:14px;color:#666;margin-top:8px}
#backToTop.back-to-top{position:fixed!important;right:22px!important;bottom:22px!important;width:50px!important;height:50px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:50%!important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)!important;color:#fff!important;font-size:22px!important;font-weight:700!important;line-height:1!important;cursor:pointer!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;box-shadow:0 8px 24px rgba(0,0,0,.20)!important;transition:opacity .25s ease,transform .25s ease,visibility .25s ease!important}
#backToTop.back-to-top.show{opacity:1!important;visibility:visible!important;pointer-events:auto!important}#backToTop.back-to-top:hover{transform:translateY(-3px)!important}
.blog-ebook-actions .read-more{margin-top:10px;}
@media(max-width:950px){
.blog-toolbar .read-more{margin-left:0 !important;}
}
@media(max-width:640px){
#backToTop.back-to-top{right:14px!important;bottom:14px!important;width:46px!important;height:46px!important;font-size:20px!important}
.article-page{padding-bottom:0;}
.related-links ul, .related-links ol{padding-left:0;}
}
pre {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre code {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  margin: 24px auto 10px;
  max-width: 760px;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: #fff;
  color: var(--primary, #111) !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.social-link svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}
.social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.28);
}
.social-link:focus-visible {
  outline: 3px solid #ffd54a;
  outline-offset: 3px;
}
footer .social-links {
  margin-top: 22px;
  margin-bottom: 28px;
}
footer .social-link {
  background: transparent;
  border-color: rgba(0,0,0,.16);
}
@media (max-width: 600px) {
  .social-links {
    flex-direction: column;
    max-width: 320px;
  }
  .social-link {
    width: 100%;
  }
}
.contextual-link{margin:18px 0;padding:14px 16px;border-left:3px solid currentColor;background:rgba(0,0,0,.035);font-size:.96em}.contextual-link a{font-weight:600}

.related-links{margin:42px 0 10px;padding:24px;border:1px solid #e8e8e8;border-radius:16px;background:linear-gradient(135deg,#fff,#fafafa)}
.related-links h2{margin:0 0 10px;font-size:20px}
.related-links p{margin:0 0 16px;color:#666;line-height:1.7}
.related-links-list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.related-links-list a{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;background:#111;color:#fff;text-decoration:none;font-weight:700;font-size:13px}
.related-links-list a:hover{background:#f5c542;color:#111}

.qa-summary-box{margin:30px 0;padding:24px;border:1px solid #e8e8e8;border-radius:16px;background:#fafafa}.qa-summary-box h2{margin-top:0}.qa-summary-box li{margin:8px 0;line-height:1.7}