/* Quiet blue code surfaces shared by article pages. */
.article-body .code-block {
  min-width: 0;
  margin: 24px 0 32px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #EDF2FA;
  box-shadow: 0 10px 28px -22px rgba(44, 70, 119, .3);
  color: #2D3E58;
}
.code-block__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #E7EEF8;
}
.code-block__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}
.code-block__filename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Consolas, 'Cascadia Code', 'SFMono-Regular', monospace;
  font-size: 12px;
  color: #4F6287;
}
.code-block__language {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: #F7FAFF;
  color: #5A73A4;
  font-size: 11px;
  line-height: 1.6;
}
.code-block__copy {
  flex: none;
  min-width: 64px;
  min-height: 34px;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: #F7FAFF;
  color: #36578D;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  transition: background-color 160ms ease-out;
}
.code-block__copy:hover { background: #D8E4F6; }
.code-block__copy:focus-visible { outline: 3px solid #7292F0; outline-offset: 2px; }
.code-block__copy:disabled { opacity: .65; }
.code-block__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.article-body .code-block pre {
  min-width: 0;
  max-height: 480px;
  margin: 0;
  padding: 20px 22px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: Consolas, 'Cascadia Code', 'SFMono-Regular', monospace;
  font-size: 14px;
  line-height: 1.75;
  tab-size: 4;
  white-space: pre;
  overflow-wrap: normal;
  scrollbar-width: thin;
  scrollbar-color: #BAC9E2 #EDF2FA;
}
.article-body .code-block pre:focus-visible { outline: 2px solid #7292F0; outline-offset: -2px; }
.article-body .code-block code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 0;
  background: transparent;
  font: inherit;
  white-space: inherit;
}
.code-block .token-keyword { color: #B23850; }
.code-block .token-function { color: #2D5FA8; }
.code-block .token-string { color: #50765F; }
.code-block .token-number { color: #A05C2E; }
.code-block .token-comment { color: #7B87A0; }
@media (max-width: 760px) {
  .code-block__toolbar { gap: 8px; padding: 10px 12px; }
  .code-block__caption { gap: 7px; }
  .article-body .code-block pre { padding: 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .code-block__copy { transition: none; }
}